React Native:如何模拟Onblur和Onfocus事件以查看

Question

在React Native中，只有TextInput具有onFocus和onBlur事件侦听器。但是，我们想模拟对View的效果。

这是我们尝试实现的目标。屏幕上有一个View。当用户点击它并将其贴上时，它会获得"焦点"。我们想检测到View之外的用户点击，以便我们可以"模糊" View，即删除亮点。

。

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

Answer 1

我认为最简单的是设置状态变量，以便您可以使用诸如：

之类的效果。

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 />，也可以使用数组中的每个项目views都具有任何样式，并且如果仅通过访问this.state.activeView，则可以配置每种样式。

让我知道您是否有任何问题。

Answer 2

在这种情况下，我将onPress()添加到相关View之外的元素中。

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