web-dev-qa-db-fra.com

TouchablePacity et Button ne fonctionnent pas dans le mode de réagissage de Native Modal?

J'ai créé réagir Native Modal mais touchableOpacity et Button ne sont pas cliqués lorsque l'utilisateur tente de cliquer dessus pourquoi donc?

code: (partie 1)

<Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <FilterScreen/>
              <TouchableHighlight
                onPress={() => 
                  this._setModalVisible(!this.state.modalVisible)
                }>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

FiltreScreen Composant:

return(
   <View>
      <TouchableOpacity>
           <Text>Inside Filter screen</Text>
      </TouchableOpacity>
    </View>
)

Dans le code ci-dessus, j'ai ajouté un composant FilterScreen qui a touchableOpacity à l'intérieur, mais lorsque Modal s'ouvre, je ne suis pas capable de cliquer sur le composant TouCableopacity, il ne l'affiche que dans modal mais onclick ne fonctionne pas.

Code: (Partie 2)

<Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
               <TouchableOpacity>
                 <Text>Inside Filter screen</Text>
               </TouchableOpacity>
              <TouchableHighlight
                onPress={() => 
                  this._setModalVisible(!this.state.modalVisible)
                }>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

Code ci-dessus s'exécute si j'ajoute TouchableOpacity Inside Modal mais le même code à l'intérieur de FilterScreen ne fonctionne pas en ajoutant un composant pourquoi?

Remarque: la partie 1 ne fonctionne pas mais la partie 2 code fonctionne pourquoi donc?

javascriptreactjsreact-native
17
fun joker

Hey je ne sais pas si vous êtes toujours confronté à cette question, mon problème était que j'ai importé le TouchableOpacity de l'react-native-gesture-handler Package plutôt que le package de réact-natif par défaut. C'était le paquet que mon auto-complet choisit de le résoudre. Après avoir modifié l'importation sur l'autre emballage, cela fonctionnait à nouveau comme prévu.

import { TouchableOpacity } from 'react-native';
22
sjoerd216

Comment créez-vous ce composant de filtre? Faites-vous une classe et retournez-vous la vue dans la méthode de rendu?

0
avani kothari