Question

我正在尝试将scrollview中的常规映射数组转换为FlatList组件，但运气不佳。使用地图效果很好，但是现在将相同的数据转换为FlatList不会呈现任何内容。

FLATLIST：

<View style={styles.container}>
  <FlatList 
     keyExtractor={(item) => item.url}
     data={this.props.links}
     renderItem={
       ({item}) => {
         <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${link.mobile.replace('https://', '')}`)}>
            <LinkContainer
               id={item.id}
               likes={item.totalLikes}
               username={this.props.username}/>
         </TouchableOpacity>
      }
    }
   />
</View>

映射的数组：

<View style={styles.container}>
  this.props.links((link) => {

    return(

         <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${link.mobile.replace('https://', '')}`)}>
            <LinkContainer
               id={link.id}
               likes={link.totalLikes}
               username={this.props.username}/>
         </TouchableOpacity>

    )

})

因此使用map方法的示例效果很好，但随后尝试将其转换为平面列表失败，没有任何日志或错误，只是空白页

Answer 1

根据您提供的信息，您似乎在renderItem函数中缺少了 spreading 参数。我们使用了{}，因此需要返回JSX标签

<View style={styles.container}>
  <FlatList 
     keyExtractor={(link) => link.url}
     data={this.props.links}
     renderItem={
      ({item}) => {  // Here you receive array element as item. 
        return <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${item.mobile.replace('https://', '')}`)}>
            <LinkContainer
               id={item.id}
               likes={item.totalLikes}
               username={this.props.username}/>
         </TouchableOpacity>
      }
    }
   />
</View>

看看docs在renderItem中收到了什么

Answer 2

我认为问题可能很简单。 <Flatlist>内部的<View style={styles.container}>没有高度和宽度，因此在内部渲染的项目也没有高度和宽度，因此不会显示在屏幕上。（如果您使用flex在LinkContainer组件内设置高度）。给您的Flatlist高和宽，然后重试。

此外，根据Revansiddh的answer，您的renderItem道具应如下所示。

请注意，删除粗箭头功能中的{}。如果按照您的问题将JSX包装在{}中，则粗箭头功能将不会返回任何内容或将返回undefined，因此屏幕上不会呈现任何内容。因此，您需要一个return语句或完全删除{}。

({ item }) => (
         <TouchableOpacity activeOpacity={1} onPress={() => Browser.open(`https://${item.mobile.replace('https://', '')}`)}>
            <LinkContainer
               id={item.id}
               likes={item.totalLikes}
               username={this.props.username}
            />
         </TouchableOpacity>
)

FlatList没有被渲染

2 个答案: