9

（注意：我正在为这个应用程序使用 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>，打印机名称的呈现方式与我期望的一样。

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

4

6 回答 6

19

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

改变：

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

对此：

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

解决了我的问题。

于 2019-12-27T04:49:19.470 回答
6

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

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

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

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

于 2017-11-01T22:42:09.847 回答
5

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

render() {
    const dimensions = Dimensions.get('window');
    const screenWidth = dimensions.width;
    return(
      <FlatList
         style={{
             flex: 1,
             width: screenWidth,
         }}
       ... some code here
      />
    )
}
于 2018-11-14T04:15:45.310 回答
1

你不能keyExtractor以这种方式使用，使这个函数如下所示。它可能会解决您的问题。

_keyExtractor = (item, index) => index;

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

于 2017-11-01T20:40:08.490 回答
0

在我的情况下，我不小心把它做成了一对标签：<FlatList></FlatList>，由于某种原因，它破坏了列表项的呈现。

于 2019-06-05T22:11:32.990 回答
0

在我的情况下，容器的宽度不是 100%：

const Container = styled.View`
  border: 1px solid #ececec;
  margin-top: 43px;
  padding-top: 36px
  padding-bottom: 112px;
  width: 100%;
`;

const StyledFlatList = styled(
  FlatList as new () => FlatList<SimilarRewards_viewer['merchants']['edges'][0]>
)`
  width: 100%;
  height: 150px;
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
`;
于 2021-03-25T13:36:31.570 回答