隠すコンポーネント

Question

の外側をクリックし、私はそれの外にクリックされたときにコンポーネントを非表示にしたいです。キーボードを切るようなもの。これは、onSressの状態を変更することによってToucheableWithoutFeedback内の全体のビューをラップすることで行いましたが、ToucheablesはScrollViewを無効にします。

は、あなたは私の作品はまだscrollview方法のアイデアを与えることはできますか？

または

ビュー内またはコンポーネント外でタップを処理するにはどうすればよいですか？

私の現在のコードは次のようなものです：

<TouchableWithoutFeedback onPress={() =>{this.setState({toggle:false})}}> 
    <View> 
    {//content} 
    </View> 

    <ScrollView> 
    {//lists here} 
    </ScrollView> 
    {{ 
    if(this.state.toggle){ 
    return 
    (<View> 
     {//The view that im hiding when clicking outside it} 
    </View>) 
    } 
    else 
    return <View/> 
</TouchableWithoutFeedback> 

Answer 1

一つのアプローチは、TouchableWithoutFeedback whisのための「偽」コンテナが実際の内容以下単に層であることです。ここでは例です：https://rnplay.org/apps/k2RSNw

render() { 
    return (
    <View style={styles.container}> 
     <TouchableWithoutFeedback onPress={(evt) => this.toggleState(evt)}> 
     <View style={styles.touchable}></View> 
     </TouchableWithoutFeedback> 
     <View style={[styles.modal, this.isModalVisible()]}> 
     <Text>Modal</Text> 
     </View> 
    </View> 
); 
} 

あなたがクリックした要素に応じて特定の何かをしたい場合は、あなたがtoggleState()に提供されevtからイベントデータを取り込むことができます。

私はスタイルを介して視認性を切り替えるようにしました。これは、多くの場合、私は、要素を切り替えるための視覚的な効果があったことを扱っているからです。

Answer 2

簡単な方法は、あなたの応答のためのモーダル透明

<Modal 
      transparent 
      visible={this.state.isAndroidShareOpen} 
      animationType="fade" 
      onRequestClose={() => {}} 
     > 
      <TouchableOpacity 
      activeOpacity={1} 
      onPress={() => { 
       this.setState({ 
       isAndroidShareOpen: false, 
       }); 
      }} 
      style={{ 
       backgroundColor: 'transparent', 
       flex: 1, 
      }} 
      > 
      <TouchableOpacity 
       activeOpacity={1} 
       style={{ 
       backgroundColor: '#f2f2f2', 
       left: 0, 
       top: 50, 
       aspectRatio: 1.5, 
       width, 
       position: 'absolute', 
       }} 
      > 
       <Text>content</Text> 
      </TouchableOpacity> 
      </TouchableOpacity> 
     </Modal>