web-dev-qa-db-fra.com

React Native Touchable désactive ScrollView

Je suis nouveau sur React Native, je demande donc probablement quelque chose de très évident, mais aidez-moi s'il vous plaît.

J'ai une vue enveloppée dans un contactable, de sorte que toute la région répond à tapoter. Ensuite, avoir une ScrollView imbriquée dans la vue. La structure générale ressemble à ceci:

<TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
    <View>
        <ScrollView>
            <Text>Hello, here is a very long text that needs scrolling.</Text>
        <ScrollView>
    </View>
</TouchableWithoutFeedback>

Lorsque ceci est compilé et exécuté, le tapotement est détecté, mais la vue de défilement ne défile pas du tout. Le code ci-dessus est simple et court, mais chaque composant a le style approprié et tout le rendu est correct. Le texte long est tronqué au bas de ScrollView. S'il vous plaît aider.

Je vous remercie!

scrollviewreact-native
20
Wonil Suh
I'm using this structure it's working for me:

<TouchableWithoutFeedback onPress={() => {}}>
    {other content}   
    <View onStartShouldSetResponder={() => true}>
        <ScrollView>
            {scrollable content}
        </ScrollView>
    </View>
</TouchableWithoutFeedback>
20
elf2707

C'est ce qui a fonctionné pour moi:

<TouchableWithoutFeedback onPress={...}>
  <View>
    <ScrollView>
      <View onStartShouldSetResponder={() => true}>
        // Scrollable content
      </View>
    </ScrollView>
  </View>
</TouchableWithoutFeedback>

La prop onStartShouldSetResponder arrête la propagation de l'événement tactile vers l'élément TouchableWithoutFeedback.

9
John Doe

Vous pouvez avoir une scrollView ou une FlatList dans un TouchableWithoutFeedback. Tho vous ne devriez pas mais certaines fois, vous n'avez pas d'autre choix. Regarder attentivement ces questions et réponses confirme cela. fermer réagit natal modal en cliquant sur superposition , comment ignorer modal en tapant sur l’écran dans réagir natif .

Pour la question, la seule façon de le faire fonctionner (du moins que je sache), ou le moyen le plus simple est d’ajouter un TouchableOpacity autour du texte dans votre code comme ceci, 

 <TouchableWithoutFeedback onPress={this.handlePress.bind(this)}>
    <View>
        <ScrollView>
          <TouchableOpacity>
            <Text>Hello, here is a very long text that needs scrolling.</Text>
          </TouchableOpacity>
        <ScrollView>
    </View>
</TouchableWithoutFeedback>

Remarque: TouchableOpacity est un wrapper permettant de faire en sorte que les vues répondent correctement aux touches. Vous pouvez ainsi automatiquement le styler comme vous auriez stylé votre composant View, puis définir certains de ses accessoires spéciaux sur tout ce que vous voulez, par exemple activeOpacity, etc. Vous pouvez également utiliser TouchableHighlight. , mais il reçoit un élément enfant, c’est-à-dire que vous insérez tous vos composants dans un élément parent.

3
Caleb Tolu Israel

J'ai constaté que dans mon cas, les autres exemples ne fonctionnaient pas car ils désactivaient la possibilité de cliquer ou désactivaient la possibilité de faire défiler. J'ai plutôt utilisé:

<FlatList
      data={[{key: text1 }, { key: text2 } ...]}
      renderItem={({ item }) => (
        <TouchableWithoutFeedback onPress={this.onPressContent}>
          <Text style={styles.text}>{item.key}</Text>
        </TouchableWithoutFeedback>
      )}
 />

Il m'est arrivé d'avoir besoin de plusieurs morceaux, mais vous pouvez utiliser un seul élément dans le tableau de données pour un morceau de texte. Cela permet à l'événement de presse de se déclencher ainsi que de faire défiler le texte.

0
Caden