web-dev-qa-db-ja.com

React他のコンポーネントを含むネイティブFlatListが最後までスクロールしない

テキストボックス/ボタン/その他のコンポーネントを含むページRNフラットリストを取得しましたが、問題は、フラットリストの最後までスクロールできないこと、他の一部がオーバーフローしていたことです。 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

Flatlistをstyle={{flex:1}}で囲みます。機能しない場合は、marginBottomをフラットリストに追加します

<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

同じ問題がありました。上部にパディングを追加しようとしたため、残りのコンテンツが押し下げられました。これを正しく変更するには、contentContainerStyleプロップを設定してから、styleのFlatListプロップに残りのすべてのスタイルを設定する必要があります。例：

<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

width: '100%', height: '100%' FlatList/ScrollViewのスタイルで試してください。

0
Alien_VIII