React Native Touchable schakelt ScrollView uit

Ik ben nieuw bij React Native, dus ik vraag waarschijnlijk iets heel voor de hand liggends, maar help alsjeblieft.

Ik heb een uitzicht verpakt in een tastbaar, zodat het hele gebied reageert op tikken. Laat dan een ScrollView genest in de weergave. De algemene structuur is ongeveer als volgt:

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

Wanneer dit wordt gecompileerd en uitgevoerd, wordt het tikken gedetecteerd, maar de scroll-weergave scrolt helemaal niet. Ik heb de bovenstaande code kort en eenvoudig gemaakt, maar elk onderdeel heeft de juiste stijl en ik kan zien dat alles goed wordt weergegeven en de lange tekst is afgebroken onderaan de ScrollView. Help alstublieft.

Bedankt!


Antwoord 1, autoriteit 100%

Dit is wat voor mij werkte:

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

De onStartShouldSetResponderprop stopt de aanraakgebeurtenispropagatie naar het TouchableWithoutFeedbackelement.


Antwoord 2, autoriteit 58%

I'm using this structure it's working for me:
<TouchableWithoutFeedback onPress={() => {}}>
    {other content}   
    <View onStartShouldSetResponder={() => true}>
        <ScrollView>
            {scrollable content}
        </ScrollView>
    </View>
</TouchableWithoutFeedback>

Antwoord 3, autoriteit 16%

Je kunt een scrollView of FlatList in een TouchableWithoutFeedback hebben. Dat zou je niet moeten doen, maar soms heb je geen andere keuze om te gaan. Als u deze vragen goed bekijkt en beantwoordt, bevestigt u dat.
Sluit native modal reageren door op overlay te klikken,
hoe modal te sluiten door op het scherm te tikken in native reageren.

Voor de vraag: de enige manier waarop je het kunt laten werken (tenminste dat ik weet), of de eenvoudigste manier is om een ​​TouchableOpacity rond tekst toe te voegen aan je code, op deze manier,

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

Opmerking: TouchableOpacity is een wrapper om Views correct te laten reageren op aanrakingen, zodat u het automatisch kunt stylen zoals u uw View Component zou hebben gestyled, en vervolgens enkele van zijn speciale rekwisieten in te stellen op wat u maar wilt, bijvoorbeeld activeOpacity enz. Meer dus dat u kunt gebruiken TouchableHighlight het werkt, maar het ontvangt één onderliggend element, dat wil zeggen dat u al uw componenten in een bovenliggend element plaatst.


Antwoord 4, autoriteit 6%

Ik gebruik deze structuur, het werkt voor mij:

<TouchableOpacity>
{other content}  
<ScrollView> 
     <TouchableOpacity activeOpacity={1}>
        {scrollable content}
     </TouchableOpacity>
</ScrollView>

Antwoord 5, autoriteit 3%

Ik ontdekte dat voor mijn situatie de andere voorbeelden niet werkten omdat ze de mogelijkheid om te klikken of de mogelijkheid om te scrollen uitschakelden. Ik gebruikte in plaats daarvan:

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

Ik ben erachter dat ik meerdere brokken nodig hebben, maar je zou een enkel element kunnen gebruiken in de data-array voor één stuk tekst.
Dit laat het persevenement om te vuren en de tekst te laten scrollen.

Other episodes