web-dev-qa-db-ja.com

Reactネイティブ-フラットリストがレンダリングされない

（注：このアプリではExpoを使用しています）

プリンターのリストを表示するFlatListをレンダリングしようとしています。これがコードです：

<FlatList
  data={printers}
  keyExtractor={printer => printer.id}
  renderItem={({ item }) => {
    return (
      <Printer
        printerTitle={item.name}
        selected={item.selected}
        last={item === last(printers)}
      />
    );
  }}
/>

<Printer />コンポーネントのコードは次のとおりです。

const Printer = props => {
  const { last, printerTitle, selected } = props;
  return (
    <View style={[styles.container, last ? styles.lastContainer : null]}>
      <View style={styles.innerContainer}>
        <View style={styles.leftContainter}>
          {selected ? (
            <Image source={selected ? Images.checkedCircle : null} />
          ) : null}
        </View>
        <View style={styles.printerDetails}>
          <Text style={styles.printerTitle}>{printerTitle}</Text>
        </View>
      </View>
    </View>
  );
};

...

export default Printer;

<Printer />コンポーネントをレンダリングできないようです。私はFlatListプロップに同様のカスタムコンポーネント（アプリの別の部分のrenderItemで機能する）を含めてみましたが、どちらも機能しません。

ただし、<Printer />コンポーネントを<Text>{item.name}</Text>コンポーネントに置き換えると、プリンター名が期待どおりに表示されます。

誰かが以前にこの問題に遭遇したことがありますか、または誰かが解決策を持っていますか？

react-nativerenderexpo
6
makozlo

目前に2つの問題があると思います。1つはFlatListが画面（つまり、親ビュー）に表示されないこと、もう1つは、Printerコンポーネントのサイズが正しくないことです。

最初の問題については、{ flex: 1 }のスタイルをFlatListに配置します。このようにして、親ビューを塗りつぶします。

2番目の問題については、プリンターコンポーネントに{ borderColor: 'red', borderWidth: 1 }を追加してみてください。これにより、レンダリングされている場所をより簡単に確認できます。幅がないように見える場合は、PrinterコンポーネントのルートビューでalignSelfをオーバーライドしていないことを確認してください。高さがないように見える場合は、一時的にheight: 100を追加して、Printerコンポーネントの内容がどのように見えるかを確認します。

Printerコンポーネント内で、{ width: 40, height: 30 }のようにImageコンポーネントで画像の幅と高さを指定するか、論理ピクセル単位で画像の寸法を指定してください。

4
ide

リストの各アイテムのカスタムコンポーネントをレンダリングしている私の場合、_{}_ではなくrenderItemプロップの戻り部分を誤って_()_で囲んでいたため、レンダリングされませんでした。

変化：

_<FlatList
  data={array}
  renderItem={({item, index}) => { <CustomItemComponent /> }}
/>
_

これに：

_<FlatList
  data={array}
  renderItem={({item, index}) => ( <CustomItemComponent /> )}
/>
_

私の問題を解決しました。

2
Jim

このようにkeyExtractorを使用することはできません。この関数を以下のようにします。それはあなたの問題を解決するかもしれません。

_keyExtractor = (item, index) => index;

プリンターコンポーネントコードを使用して質問を更新すると、より良いサポートを提供できます。

1
Vahid Boreiri

同じ問題があります。 FlatListに幅を追加して解決する

render() {
    const dimensions = Dimensions.get('window');
    const screenWidth = dimensions.width;
    return(
      <FlatList
         style={{
             flex: 1,
             width: screenWidth,
         }}
       ... some code here
      />
    )
}
1
Павел Зырянов

私の場合、誤ってペアタグにしました：<FlatList></FlatList>、これは何らかの理由でリスト項目のレンダリングを中断します。

0
Eskel