web-dev-qa-db-fra.com

FlatList contentContainerStyle -> justificationContenu: 'centre' cause des problèmes avec le défilement

J'ai un composant FlatList où je rends x nombre de TouchableHighlight. J'ai besoin que tous les composants du FlatList soient alignés verticalement au centre.

Le problème est que si je mets justifyContent: center dans contentContainerStyle rien ne se passe mais, si j'ajoute flex: 1 à contentContainerStyle J'obtiens le résultat souhaité. C'est cool si je n'ai pas à faire défiler, mais quand j'ai un certain nombre de composants dans le FlatList qui force le défilement pour tout voir, le défilement commence au centre de ces listes et ne ' t laissez-moi faire défiler.

Voici mon code:

<FlatList
        style = {{flex: 0.7, backgroundColor: 'red'}}
        data = {this.props.actions}
        contentContainerStyle = {{justifyContent:'center',}}
        keyExtractor={(item, index) => index}
        renderItem = {({item, index})=>{
          return (
            <TouchableHighlight
              style = {{alignItems: 'center', margin: 8, paddingTop: 8, paddingBottom: 8, //flex: 1,
              borderColor: ConstantesString.colorGrisFlojito, backgroundColor: '#d7deeb',
              borderRadius: 10,
            }}
              underlayColor = {ConstantesString.colorAzulTouched}
              onPress = {()=>{
                item.action();
              }}>
              <Text
                style = {{color: '#005288' , textAlign: 'center', fontSize: 20}}
              >
                {item.name}
              </Text>
            </TouchableHighlight>
          )
        }}
      />

Je ne sais pas si c'est un bug ou je fais juste du mal.

javascriptandroidiosreact-nativemobile-development
7
SmoggeR_js

Ce n'est pas un bug et vous ne faites pas de mal , c'est le comportement attendu puisque vous ajoutez explicitement flex au - conteneur du ScrollView's liste en lui faisant prendre le height global de l'écran, donc Défilement uniquement jusqu'au contenu de l'écran .

Vous devez utiliser flexGrow au lieu de flex pour le résoudre

Le facteur de croissance flexible d'un élément flexible est par rapport à la taille des autres enfants dans le flex- conteneur

<FlatList
    contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
    //... other props
/>
17
Pritish Vaidya