web-dev-qa-db-fra.com

React Native FlatList avec un autre composant ne défile pas jusqu'à la fin

J'ai obtenu une liste plate de page RN avec un composant zone de texte/bouton/autres, mais le problème est que je ne suis pas en mesure de faire défiler jusqu'à la fin de la liste plate, il y a une autre partie qui était en quelque sorte un débordement. enter image description here

 <View>
<TextInput
    value={this.state.code}
    onSubmitEditing={this.getPr}
    style={styles.input}
    placeholder="placeholder"
/>
<Button onPress={this.getPr} title="Cari" color="blue" />
<FlatList
    data={this.props.produk}
    renderItem={({ item }) => (
        <View key={item.id}>
            <Image
                resizeMode="cover"
                source={{ uri: item.thumb }}
                style={styles.fotoProduk}
            />
        </View>
    )}
    keyExtractor={(item, index) => index}
/>
</View>;
react-nativereact-native-flatlist
8
user4535674

Enveloppez Flatlist avec style={{flex:1}}. Si cela ne fonctionne pas, ajoutez marginBottom à la liste plate

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

<FlatList
    data={this.props.produk}
    renderItem={({ item }) =>
        <View key={item.id} >
            <Image resizeMode="cover" source={{ uri: item.thumb }} style={styles.fotoProduk} />
        </View>
    }
    keyExtractor={(item, index) => index}/>
</View>
18
saiful619945

J'ai eu le même problème. J'essayais d'ajouter du rembourrage en haut, ce qui a fait baisser le reste du contenu. Vous devez définir l'accessoire contentContainerStyle pour le modifier correctement, puis définir tous les styles restants sur l'accessoire style du FlatList. Exemple:

<FlatList
  style={{
    flex: 1
  }}
  contentContainerStyle={{
    paddingTop: 40
  }}
  data={this.props.produk}
  renderItem={({ item }) => (
    <View key={item.id}>
      <Image
        resizeMode="cover"
        source={{ uri: item.thumb }}
        style={styles.fotoProduk}
      />
    </View>
  )}
  keyExtractor={(item, index) => index}
/>
3
Teddy Sterne

Vous pouvez définir width: '100%', height: '100%' dans le style de FlatList/ScrollView pour essayer.

0
Alien_VIII