React Native - FlatList 不渲染答案

【问题标题】：React Native - FlatList Not RenderingReact Native - FlatList 不渲染
【发布时间】：2018-04-14 04:59:30
【问题描述】：

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

但是，当我将 <Printer /> 组件替换为 <Text>{item.name}</Text> 组件时，打印机名称的呈现方式与我预期的一样。

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

【问题讨论】：

打印机组件是什么样的？你如何导出它？你如何导入它？你有没有尝试将Printer中的渲染组件直接放入renderItem？你有任何错误吗？

标签： react-native expo custom-component flatlist

【解决方案1】：

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

变化：

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

对此：

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

解决了我的问题。

【讨论】：

是的！这是完美的解决方案
其中一个你花了几个小时试图看看发生了什么，而你所需要的只是另一双眼睛......

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这是给我的。在样式中添加了 Width: '100%' 并且效果很好

【解决方案4】：

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

_keyExtractor = (item, index) => index;

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

在我的例子中，Container 的宽度不是 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;
`;

【讨论】：