FlatListの最後に最後の要素を1つ追加します

Question

私は次のことを達成しようとしていますが、最後を除いてすべてが配列からの通常の画像です。

現在、これはFlatListのコードです。

<FlatList
  data={images}
  numColumns={3}
  // ListFooterComponent={
  // <View style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
  //     <Image source={require('../../../images/add-icon.png')} />
  // </View>}
  renderItem={ ({item, index}) => index == images.length -1 ?
     <View style={{flexDirection: 'row'}}>
       <Image style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source={{uri: item.url}} /> 
       <View style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
         <Image source={require('../../../images/add-icon.png')} />
       </View>
     </View>
    : <Image style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source={{uri: item.url}} /> }
  keyExtractor={(item, index) => index.toString()}
/>

短い話ですが、配列内の画像を3列のテーブルにレンダリングし、リストの最後の画像をチェックし、画像のレンダリングに加えて、このプラス記号もレンダリングします。

ただし、リストに3の倍数の要素が含まれている場合、プラス記号が画面の外にある可能性が高いため、これには何らかのエラーが発生する可能性があります。 ListFooterComponentを使用すると、まったく新しい行にレンダリングされます。

誰かがこれに対する効果的な回避策を知っていますか？

Answer 1

私も同じ状況に遭遇し、FlatListのドキュメントを確認したときに良い方法を見つけたので、ListFooterComponentを使用するのが最善の方法です。その要素のスタイルオブジェクトを渡すことができます。 using ListFooterComponentStyle詳細はここをクリック 。