react-native - React Native flatlist 条件渲染

标签 react-native react-native-flatlist

我有以下与 native react 的平面列表
项目。

key
姓名
类型

现在我还有以下用于渲染的 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>
  )}

我想根据 flatlist 的 item 键渲染不同的渲染函数
有没有我可以用 react native flatlist base 做条件渲染
关键?

最佳答案

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

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

然后只需放入 switch 或一些 if 语句,您就可以有条件地呈现。

关于react-native - React Native flatlist 条件渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53655722/

相关文章:

javascript - React-native:FlatList 获取滚动引用

android - React - Native 缺少权限 android.permission.READ_PHONE_STATE

ios - 架构 arm64 的 undefined symbol - JSClassCreate

javascript - TypeError undefined 不是一个函数

javascript - React-Native:Modal 中的 Flatlist 无法滚动

react-native - 如何将 ListFooterComponent 粘贴到屏幕底部?

javascript - react-native:导入后找不到变量样式表

javascript - 如何从 JavaScript 获取 React Native packager ip?

javascript - FlatList 使用静态组件滚动

reactjs - 无限滚动 React 网格,它只渲染可见的网格瓦片,但回收它们以显示 "new"瓦片 : Similar to React Native FlatList