React Native 平面列表条件渲染

Question

我有以下与以下项目反应本机的平面列表。

键名类型

现在我还有以下 renderItem 函数，用于渲染平面列表的元素。

 renderItem={({ item }) => (
     <View>
     <View style={styles.navBarLeftButton}>
     <Avatar
     medium
     rounded
     source={{uri:item.name}}
     activeOpacity={0.7}
    onPress={() => console.log(this.state.data)}
    />
  <Text style={styles.textbutton}>{item.type}</Text>
  <Text>{item.description}</Text>
  <Text>{item.request} <Emoji name={item.request} style={{fontSize: 15}} /> 
 <Emoji name="pray" style={{fontSize: 15}} /></Text>
 </View>
 </View>
  )}

我想根据平面列表的项目键渲染不同的渲染函数，我可以使用基于键的本机平面列表进行条件渲染吗？

Answer 1

Flatlist 的proprenderItem可以接受 2 个参数，第二个是索引，所以你可以做类似的事情

renderItem={({ item, index })=>{
    if(index = 0){
        //do something
    }
}}

然后只需添加一个 switch 或一些 if 语句，您就可以有条件地渲染。