ビューの外側のタップを検出するネイティブで反応する

Question

ビューの外側のタップを検出する方法（ビューは幅が1つで、高さは200です）。たとえば、私はカスタムビュー（これはモーダルのようなものです）を持っており、可視性は状態によって制御されます。しかし、その外側をクリックすると、何も変更されません。なぜなら、そのためにsetStateが実行されていないからです。モーダル内を除いて、ユーザがどこにでもタップする必要があります。それはどのようにしてReact Nativeで可能ですか？

Answer 1

あなたのモーダルの周囲にTouchableOpacityを使用し、それがonPressであることを確認してください。この例を見てください。

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, 
    } 
});