Ukryj komponent po kliknięciu na zewnątrz

Question

Chcę ukryć komponent po kliknięciu poza nim. Coś jak odrzucenie klawiatury. Zrobiłem to, owijając cały widok wewnątrz opcji ToucheableWithoutFeedback, zmieniając stan onPress, ale Toucheables wyłącza ScrollView.

Czy możesz mi powiedzieć, w jaki sposób nadal działa scrollview?

lub

Jak mogę obsługiwać krany w widokach lub poza moim składnika ??

mój bieżący kod jest coś takiego:

<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

Jednym ze sposobów jest mieć „fake” pojemnik na TouchableWithoutFeedback whis jest tylko warstwa poniżej rzeczywistej zawartości. Oto przykład: 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> 
); 
} 

Jeśli chcesz zrobić coś konkretnego w zależności od klikniętego elementu, można wypełnić dane o zdarzeniach z evt, która jest dostarczana do toggleState().

Dokonałem przełączenia widoczności za pomocą stylów. To dlatego, że w wielu przypadkach miałem do czynienia z jakimś efektem wizualnym do przełączania elementu.

Answer 2

Najłatwiej z modalnego przejrzysty

<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>