Question

（注意：我在这个应用程序中使用了Expo）

我尝试渲染显示打印机列表的<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>组件替换{{1}}组件时，打印机名称会像我期望的那样呈现。

之前是否有人遇到此问题，或者有人有解决方案吗？

Answer 1

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

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

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

在您的打印机组件中，请务必在图像组件上指定图像的宽度和高度，例如{ width: 40, height: 30 }或图像的尺寸为逻辑像素。

Answer 2

在我的情况下，我为列表中的每个项目渲染了一个自定义组件，因此没有渲染，因为我不小心在{}道具的返回部分周围放置了renderItem ()。

更改：

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

对此：

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

解决了我的问题。

Answer 3

您无法以这种方式使用keyExtractor，请执行以下功能。它可能会解决您的问题。

_keyExtractor = (item, index) => index;

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

Answer 4

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

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

Answer 5

在我的情况下，我不小心将其标记为logout，这出于某种原因中断了列表项的显示。

Answer 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;
`;

React Native - FlatList Not Rendering

6 个答案: