web-dev-qa-db-fra.com

La vue de défilement à l'intérieur de la vue ne fonctionne pas

Ici, j'essaie un code simple mais la vue de défilement ne fonctionne pas si elle est conservée dans une autre vue. Le code est comme ceci:

  return(
  <View>
    <Toolbar title={this.props.title}>
    </Toolbar>

    <ScrollView>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

      </ScrollView>

  </View>
 );

Mais si la vue de défilement est conservée comme vue parent, cela fonctionne parfaitement. Le code est comme ci-dessous:

  return(
  <ScrollView>
    <Toolbar title={this.props.title}>
    </Toolbar>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

  </ScrollView>
 );

Maintenant, le problème est que je ne veux pas que ma barre d'outils défile de haut en bas, je veux juste que le contenu sous la barre d'outils se déplace. Comment puis-je y parvenir?

Et la question suivante: la vue de défilement doit-elle être la vue parent pour retourner au travail?

reactjsreact-nativereact-native-android
16
Riten

vous devez envelopper la barre d'outils en vue comme ceci:

<View><Toolbar/></View>

Enveloppez les composants que vous souhaitez faire défiler dans scrollview comme:

<ScrollView>your expected components...</ScrollView>

Et fournissez flex à la vue racine comme:

<View style={{flex:1}}>

Enfin, votre code s'exécutera comme prévu.

26
Chiranjhivi Ghimire

Utilisez la propriété flexGrow dans le style, flex n'a pas fonctionné pour moi.

 <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    ...
</ScrollView>
30
Led Machine

Haut <View> doit avoir du style flex:1, et aussi <ScrollView> a aussi

9
Stephen Kingsley

Si vous utilisez <Form> à partir de la base native et vous souhaitez faire défiler puis utiliser KeyboardAwareScrollView

<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.

</KeyboardAwareScrollView>

cela fonctionnera sur Android

0
Advait Joshi