reactjs - 在 native react 中检测 View 外部的点击

Question

如何检测View外部的点击(View是一个宽度和高度都是200的小 View )。例如，我有一个自定义 View (就像模态)，它的可见性由状态控制。但是，当在其外部单击时，没有任何更改，因为没有为此执行 setState，我需要捕获用户在除模式内部之外的任何地方点击。这在 React Native 中怎么可能？

Answer 1

在模态周围使用 TouchableOpacity 并检查它是否处于按下状态。看这个例子。

const { opacity, open, scale, children,offset } = this.state;
let containerStyles = [ styles.absolute, styles.container, this.props.containerStyle ];
let backStyle= { flex: 1, opacity, backgroundColor: this.props.overlayBackground };

<View
    pointerEvents={open ? 'auto' : 'none'}
    style={containerStyles}>
    <TouchableOpacity
      style={styles.absolute}
      disabled={!this.props.closeOnTouchOutside}
      onPress={this.close.bind(this)}
      activeOpacity={0.75}>
      <Animated.View style={backStyle}/>
    </TouchableOpacity>
    <Animated.View>
      {children}
    </Animated.View>
  </View>

const styles = StyleSheet.create({
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'transparent'
  },
  container: {
    justifyContent: 'center',
    elevation: 10,
  }
});