Reagieren Nativen Berührbar wird, ist das deaktivieren ScrollView

Ich bin neu Reagieren Native, bin also wahrscheinlich Fragen, etwas sehr offensichtlich, aber bitte helfen.

Habe ich eine Ansicht, eingewickelt in ein berührbares, so dass die ganze Umgebung reagiert auf Antippen. Dann haben Sie einen ScrollView verschachtelte innerhalb der Ansicht. Die gesamte Struktur ist so etwas wie dieses:

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

Wenn diese kompiliert und ausgeführt wird, das klopfen wird erkannt, aber der scroll-Ansicht nicht scrollen überhaupt. Ich habe die obige code kurz und einfach, aber jede Komponente hat das richtige styling, und ich kann alles sehen-rendering gut und der lange text ist Grenzwert am unteren Ende der ScrollView. Bitte helfen Sie.

Danke!

  • Warum ist scrollview innen ein berührbares element? Warum nicht halten Sie es außerhalb?
  • versuchen Sie dies: <ScrollView onResponderTerminationRequest={(env)=>false} />
  • Nicht sicher, was genau du versuchst zu erreichen, aber nehmen Sie einen Blick auf onShouldBlockNativeResponder in facebook.github.io/react-native/docs/panresponder.html für die nicht-blockierende native Geste Handhabung.
  • Wonil können Sie dann akzeptieren Sie bitte die Antwort unter hier - - stackoverflow.com/a/46606223/1828637 -- dies ist die Lösung, es funktioniert sehr gut.
InformationsquelleAutor Wonil Suh | 2015-10-11
  1. 30
    I'm using this structure it's working for me:

<TouchableWithoutFeedback onPress={() => {}}>
    {other content}   
    <View onStartShouldSetResponder={() => true}>
        <ScrollView>
            {scrollable content}
        </ScrollView>
    </View>
</TouchableWithoutFeedback>
    • Welche Stile angewendet werden, die auf die Sicht-und ScrollView in Bezug auf die Höhe oder andere Stile, die betroffen sind, bekommen diese Lösung funktioniert? Dank
    • Wenn Sie mit FlatList mit columnWrapperStyle oder numColumns in Kombination mit contentContainerStyle, Sie haben sich zu bewegen, alle Stile, die Platz schaffen zwischen den einzelnen Listenelementen, um den renderItem Funktion. Wenn Sie verlassen sich contentContainerStyle oder columnWrapperStyle es werden spots in der FlatList, die nicht Scrollbar ist
    • Ich hätte gerne diese version zu arbeiten. Ist es für Sie arbeiten auf iOS? Check out das Expo-Snack. Es funktioniert nur für mich, auf Android, nicht iOS. ?♂️
    InformationsquelleAutor elf2707
  2. 17

    Dies ist was für mich gearbeitet:

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

    Den onStartShouldSetResponder prop hält das touch-event-propagation in Richtung der TouchableWithoutFeedback element.

    • Hallo können Sie bitte die die entsprechenden Stile angewendet, um die ScrollView, wrapper-Ansicht und innen-Ansicht? Ich bin immer noch nicht bekommen, diese arbeiten mit den Lösungen. Danke. @John Doe
    • entfernen Sie die ; nach true. Andere als die, diese Lösung funktionierte für mich. elf2707 das nicht - hinzufügen musste onStartShouldSetResponder den Kindern der ScrollView
    • yesss....toller trick ... tnx die innere Sicht ist Arbeit.
    InformationsquelleAutor Rod
  3. 3

    Können Sie einen scrollView oder FlatList innerhalb einer TouchableWithoutFeedback. Tho Sie sollten nicht, aber einige Male haben Sie keine andere Wahl zu gehen. Nehmen Sie einen guten Blick auf diese Fragen und Antworten überprüft, dass.
    schließen Sie reagieren einheitlichen modal, indem Sie auf overlay,
    wie zu entlassen modal durch Antippen der Bildschirm reagiert native.

    Für die Frage, ist der einzige Weg, können Sie machen es zu arbeiten (mindestens, die ich kenne), oder die einfachste Möglichkeit ist das hinzufügen von ein TouchableOpacity um den Text in Ihrem code wie folgt, 

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

    Hinweis: TouchableOpacity ist ein wrapper für die Herstellung Ansichten richtig reagieren auf Berührungen, so automatisch können Sie Stil, wie Sie hätte Stil Ihr View-Komponente legen Sie dann einige seiner besonderen Requisiten, um was auch immer Sie wollen e.g activeOpacity etc. Außerdem können Sie TouchableHighlight es funktioniert, aber es bekommt ein Kind-element.e Sie schließen alle Ihre Komponenten, die sich in einem übergeordneten ein.

    InformationsquelleAutor Caleb Tolu
  4. 0

    Fand ich, dass für meine situation den anderen Beispielen nicht so funktionieren, wie Sie deaktiviert die Fähigkeit zu klicken oder die Fähigkeit deaktiviert zu Blättern. Ich habe stattdessen:

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

    Ich passiert müssen mehrere Teile aber man könnte einzelne element im Daten-array für ein Stück text.
    Diese lassen Sie die Taste event, um das Feuer sowie lassen Sie den text scrollen.

    InformationsquelleAutor Caden
  5. -2

    Thats schreiben , können Sie nicht über eine scroll-view innerhalb der TouchableWithoutFeedback es die Eigenschaft, reagieren die einheimischen, dass es deaktiviert ist, können Sie stattdessen die scroll-Ansicht außerhalb der TouchableWithoutFeedback Registerkarte und fügen Sie die anderen Inhalte, die Sie möchten, auf die Sie in einem anzeigen-tag.

    Können Sie auch die Berührbare Highlights statt, wenn die TouchableWithoutFeedback nicht funktioniert.

    InformationsquelleAutor Lakshaya Maheshwari
Schreibe einen Kommentar