React Native：如何模拟onBlur和onFocus事件查看

在React Native中，只有TextInput有onFocus和onBlur事件侦听器。不过，我们想在View上模拟这种效果。React Native：如何模拟onBlur和onFocus事件查看

下面是我们努力实现。屏幕上有一个View。它在用户点击它时会获得“焦点”并被高亮显示。我们要检测用户水龙头View外面，这样我们就可以“模糊”的View，即去掉亮点。

我知道我们可以使用focus方法（https://facebook.github.io/react-native/docs/nativemethodsmixin.html#focus）来请求关注View。问题是，我不知道如何检测View之外的用户按下。

来源

2017-02-23 JustWonder

在这样的情况下，我加入onPress()到这是有问题的View之外的元素。

<View onPress(removeHighlight)></View> <View onPress(addHighlight)></View>

来源

2017-02-23 19:55:27

我认为最简单的就是设置一个状态变量代替你可以玩一个如：

class MyView extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     activeView: null, 
    } 
    this.views = [ 
     (<View style={{ padding: 20 }}><Text>View 1</Text></View>), 
     (<View style={{ padding: 20 }}><Text>View 2</Text></View>), 
     (<View style={{ padding: 20 }}><Text>View 3</Text></View>), 
     (<View style={{ padding: 20 }}><Text>View 4</Text></View>), 
     (<View style={{ padding: 20 }}><Text>View 5</Text></View>), 
    ]; 
    } 

    _setActive(index) { 
    return() => { 
     this.setState({ activeView: index }) 
    } 
    } 

    render() { 
    return (
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> 
     {this.views.map((view, index) => { 
     let containerStyle = []; 
     if (index === this.state.activeView) { 
      containerStyle.push({ borderWidth: 10 }) 
     } 
     return (
     <TouchableOpacity onPress={this._setActive(index)} style={containerStyle}> 
      {view} 
     </TouchableOpacity> 
     ); 
     })} 
     </View> 
    ); 
    } 
}

您可以使用MyView，其中作为<MyView />还对每一个项目requried阵列views可以有任何所需的风格和配置每个如果处于活动状态只是进入this.state.activeView。

让我知道如果你有任何问题。

来源

2017-04-10 03:28:04

React Native：如何模拟onBlur和onFocus事件查看

回答

相关问题