web-dev-qa-db-fra.com

Comment faire en sorte que les composants restent en bas dans ScrollView tout en permettant à d'autres contenus de les pousser vers le bas

J'ai trois vues: une en haut, au milieu et en bas. La vue de défilement prend tout l'écran. Le problème est que maintenant la vue de défilement n'est pas défilable.

<ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}>
  <View><SomeContent /></View>
  <View><SomeContent /></View>
  <View><SomeContent /></View>
</ScrollView>

Si je supprime flex: 1 la vue par défilement occupe environ 50% de l'écran. Comment puis-je créer une vue de défilement avec des éléments haut, milieu et bas comme sur l'image ci-dessous.

Screenshot of an iPhone. The background of the screen is white. It has three boxes that are different shades of blue: one at the top, one in the middle, and one at bottom. The boxes are aligned to the left and there is a lot of white space between the boxes.

L'élément inférieur doit être en bas tout le temps, mais lorsque la hauteur des deux composants supérieurs est grande, ils doivent pousser le composant inférieur vers le bas pour que je puisse utiliser la vue de défilement pour monter/descendre.

react-nativeflexbox
25
1110

Utilisez flexGrow au lieu de flex. Un exemple de code est donné ci-dessous.

<ScrollView 
  contentContainerStyle={{ 
  flexGrow: 1, 
  flexDirection: 'column', 
  justifyContent: 'space-between'
}}>
  <View style={{ width: 50, height: 1000, backgroundColor:'orange' }} />
  <View style={{ width: 50, height: 50, backgroundColor:'black'}} />
  <View style={{ width: 50, height: 50, backgroundColor:'blue'}} />
</ScrollView>

Voici la capture d'écran

[1]

36
Ijharul Islam

En supprimant flex: 1, vous ne voyez que la hauteur exacte des vues.

  <ScrollView contentContainerStyle={{ backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between' }}>
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

no flex

Si vous définissez flex: 1 ou flexGrow: 1, ScrollView définira la hauteur minimale sur la hauteur de l'écran.

  <ScrollView contentContainerStyle={{ flex: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between' }}>
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

outer flex

Si la hauteur cumulée des vues est supérieure à celle-ci, la vue globale s'étendra au-delà de la hauteur de l'écran. Dans ce cas, flexGrow: 1 (montré partiellement défilé ci-dessous), vous permettra de faire défiler jusqu'au contenu, mais flex: 1 le coupera.

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between'}}>
    <View style={{ width: 100, height: 700, backgroundColor:'#b0e0e6' }} />
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

scrolled flexGrow

De là, vous pouvez définir flex sur chacune des vues pour pondérer la façon dont l'espace vide sera rempli par les vues. Par exemple, si vous définissez flex: 1 sur chacune des deux vues supérieures et flex: 2 sur la vue inférieure, alors après tenant compte de la hauteur du contenu, la vue inférieure sera donnée 1/2 de la hauteur totale à 1/4 pour chacune des deux premières vues. Comme ça:

  <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
      flexDirection: 'column', justifyContent: 'space-between'}}>
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#b0e0e6' }} />
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#87ceeb'}} />
    <View style={{ flex: 2, width: 100, height: 100, backgroundColor:'#4682b4'}} />
  </ScrollView>

inner flex

Documentation ScrollView: https://facebook.github.io/react-native/docs/scrollview.html

10
user7363719