React子コンポーネント以外のネイティブトリガープレスイベント

Question

親コンポーネント（例：TouchableOpacity）をクリックすると、私のユースケースがトリガーされますが、子コンポーネント（Screenなど）をクリックすると何もトリガーしません。私の場合はウェブ上のバブリングを防ぐのと同じです。私が読んだドキュメントからは、onStartShouldSetResponderCaptureを使用すべきだと言われましたが、私はまだ使い方について理解していません。以下はスニペットです。

<TouchableOpacity style={styles.container} onPress={() => alert('tes')} 
    > 
    <Screen style={styles.screenContainer} onStartShouldSetResponderCapture={() => false}> 
     <Title>Edit Nama Restoran</Title> 
     <Divider styleName='line' /> 

     <TextInput 
     style={{ flex: 1 }} 
     value={value} 
     onChangeText={value => this.setState({ value })} 
     onSubmitEditing={this.handleSubmit} 
     /> 

     <View styleName='horizontal' style={styles.nameContainer}> 
     <Button styleName='confirmation dark' onPress={this.handleSubmit}> 
      <Text>UPDATE</Text> 
     </Button> 
     <Button styleName='confirmation' onPress={onClose}> 
      <Text>CLOSE</Text> 
     </Button> 
     </View> 
    </Screen> 
    </TouchableOpacity> 

EDIT：以下

私の例を示す図です。

オーバレイ（<Screen>の外）をクリックすると、警告が表示されます（予想されます）。

白いダイアログ（<Screen>とその子どもたち）をクリックすると、警告（予期しない）が発生します。私が必要とするのは、<Screen>をクリックしたときに警告を発するものではありません。

<Modal 
    visible={this.state.modalVisible} 
    onRequestClose={() => {alert("Modal has been closed.")}} 
> 
    <TextInput 
    style={{ flex: 1 }} 
    value={value} 
    onChangeText={value => this.setState({ value })} 
    onSubmitEditing={this.handleSubmit} 
    /> 
</Modal> 

これはあなたのコードから右のスニペットであれば確かに、しかし、あなたがポップアップ表示したい基本的部分ではない、それを引っ張っ：モーダルで行う方法を示すように更新

Answer 1

タッチ可能な不透明度から外に出て、周囲にモーダルをラップします。その後、クリックすると可視/不可視になります。