React Native - FlatList 不渲染

Question

（注意：我正在为这个应用程序使用 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在renderItemprop 中包含一个类似的自定义组件（在应用程序的另一部分工作过），但它也不起作用。

但是，当我用<Printer />组件替换组件时<Text>{item.name}</Text>，打印机名称会像我期望的那样呈现。

有没有人遇到过这个问题，或者有没有人有解决方案？

Answer 1

在我的例子中，我为列表中的每个项目渲染一个自定义组件，它没有渲染，因为我不小心{}包围了renderItemprop的返回部分而不是().

改变：

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

对此：

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

解决了我的问题。

Answer 2

我怀疑手头有两个问题：一个是您的 FlatList 没有填满屏幕（即它的父视图），另一个是您的打印机组件的大小不正确。

对于第一个问题，{ flex: 1 }在您的 FlatList 上放置一个样式。这样它将填充其父视图。

对于第二个问题，尝试添加{ borderColor: 'red', borderWidth: 1 }到您的打印机组件，以便您可以更轻松地查看它们的渲染位置。如果它们看起来没有宽度，请确保您没有覆盖alignSelf打印机组件的根视图。如果它们看起来没有高度，请height: 100临时添加，以便您可以查看打印机组件的内容。

在您的打印机组件中，请确保在 Image 组件上指定图像的宽度和高度，例如{ width: 40, height: 30 }或无论您的图像尺寸以逻辑像素为单位。

Answer 3

我有同样的问题。通过向 FlatList 添加宽度来解决

render() {
    const dimensions = Dimensions.get('window');
    const screenWidth = dimensions.width;
    return(
      <FlatList
         style={{
             flex: 1,
             width: screenWidth,
         }}
       ... some code here
      />
    )
}

Answer 4

你不能keyExtractor以这种方式使用，请像下面这样创建这个函数。它可能会解决你的问题。

_keyExtractor = (item, index) => index;

如果您使用打印机组件代码更新您的问题，我们可以更好地帮助您。