React Native:如何为View模拟onBlur和onFocus事件

Question

在本地做出反应,只有TextInput拥有onFocus和onBlur事件侦听器.但是,我们想在a上模拟这种效果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>