React Native - FlatList 不渲染

Posted 2023-03-29

【中文标题】React Native - FlatList 不渲染

【英文标题】：React Native - FlatList Not Rendering

【发布时间】：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？你有任何错误吗？

【参考方案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;
`;