react-native - react native : how to simulate onBlur and onFocus event for View

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 即可拥有所需的任何样式并配置每个样式是否处于事件状态.

如果您有任何问题，请告诉我。