web-dev-qa-db-ja.com

Reactネイティブフラットリストが最後までスクロールしない

FlatListのリストをレンダリングする単純なCards（以下のコード）を持っています

問題：リストはレンダリングされますが、リストの最後の要素を完全に表示するためにスクロールしません、OR FlatListの下のコンテンツへ

私が試したこと：基本的に関連するすべてのSO質問：

  • すべてのスタイリングを削除する
  • FlatListをViewまたはScrollViewまたはその両方にラップする
  • style={{flex: 1}}をFlatListまたはラッパーに追加する（これにより** ALL *コンテンツが消えます）

何か案は？

<FlatList
        data={props.filteredProducts}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => props.addItemToCart(item)}>
            <Card
              featuredTitle={item.key}
              image={require('../assets/icon.png')}
            />
          </TouchableOpacity>
        )}
        keyExtractor={item => item.key}
        ListHeaderComponent={
          <SearchBar />
        }
      />
...
<Other Stuff>
react-nativereact-native-flatlistreact-native-elements
4
rubie

あなたのシナリオが数か月前のプロジェクトで遭遇したシナリオとまったく同じかどうかはわかりませんが、margin/paddingを追加する必要があることに気付きましたスクロール可能なコンテナ。これは通常、親コンテナがスクロール可能な要素のスタイル設定を妨げているように思われたためです。

flexの代わりにflexGrow: 1をスタイリングに追加してみましたか？

2
Nnanyielugo

追加 style={{flex: 1}} FlatListの親である各View要素。

3
Romanov Eugene

私の場合は少し異なります。reanimated-bottom-sheetパッケージによって提供されるボトムシート内でFlatListを使用した点です。しかし問題は同じでした：スクロールが最後のアイテムを適切に表示しませんでした。

私がした方法は、FlatListを含むビューの高さを計算して設定することでした。下のインセットがあるときに見栄えをよくするために、次のようにしてFlatListの最後の項目に下マージンを増やしました。

<FlatList
    data={results}
    keyExtractor={(item) => item.name}
    scrollEnabled={bottomSheetIndex == 1 ? true : false}
    renderItem={({ item }) =>
        <LocationInfo
            bottom={results[results.length - 1].id == item.id ? insets.bottom : 0}
            result={item}
            wait={waitState[item.id]}
            bsIndex={bottomSheetIndex}
        />
    }
/>

const LocationInfo = ({ bottom, result, wait, bsIndex }) => {

    return (
        <View style={[styles.container, { paddingBottom: bottom }]}>
            ...

インセットについては、react-native-safe-area-contextを参照してください。

0
Brian Hong

レンダーアイテムにflex：1を追加するとうまくいきました

 <FlatList
      data={data}
      renderItem={({ item }) => (
        <ListItem
          onPress={() => console.log('ok')}
          bottomDivider
          rightTitle={
            <Divider style={{ marginBottom: 4, backgroundColor: item.status, width: '50%', height: '11%', borderRadius: 10 }} />
          }
          titleProps={{ numberOfLines: 1 }}

          rightSubtitle={item.date}
          rightTitleStyle={{ fontFamily: 'poppins' }}
          rightSubtitleStyle={{ fontFamily: 'poppins' }}
          titleStyle={{ fontFamily: 'poppins' }}
          subtitleStyle={{ fontFamily: 'poppins' }}
          title={item.device}
          subtitle={item.type}
          leftAvatar={{ source: item.icon, rounded: false }}
          **style={{ flex: 1 }}**
        />
      )}
      keyExtractor={item => item._id}
      ListHeaderComponent={renderHeader}
      ListFooterComponent={renderFooter}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.2}

    />
0
Nipek

FlatListからflex：1を削除し、親ビューのみを残します。

0
Lima Neto