React Native flatlist 条件渲染答案

【问题标题】：React Native flatlist conditional renderingReact Native flatlist 条件渲染
【发布时间】：2025-12-28 18:10:06
【问题描述】：

我在本机反应中有以下平面列表，其中包含以下内容项目。

键姓名输入

现在我还有以下用于渲染的 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 做条件渲染关键？

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

Flatlist 的 renderItem 属性可以接受 2 个参数，第二个是索引，因此您可以执行类似的操作

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

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

【讨论】：

Nerdragen 有没有可以提供的代码示例？
renderItem 方法不接受任何条件 if 语句
我的目标是项目值，所以它应该是 if 语句中的 item.value 但是当我这样做时，它会抛出关于 if 语句的错误
在if语句中，将index部分改为item的属性即可。
Graig，我只是给你伪代码，你必须自己弄清楚。 item.value 是您需要替换以进一步定义条件的值。

【解决方案2】：

基于变量 DATA 中的“主题”值（作为键）FlatList renderItem 属性有条件地接受不同函数返回的不同视图/组件

<FlatList
  data={DATA}
  renderItem={({ item, index }) => {
  if (item.theme === 1) {
    return this.renderTheme1({ item });
  }
    return this.renderTheme2({ item });
  }}
  keyExtractor={item => item.id}
/>

【讨论】：

你好 krishnakumar，你能简单解释一下你的答案吗？为什么它应该是正确的？谢谢！
基于变量 DATA 中的“主题”值（作为键） FlatList renderItem prop 有条件地接受不同函数返回的不同视图/组件。
非常好！您可以通过编辑直接在答案中添加您在评论中写的所有内容吗？这就是在 SO 中通常做的事情。谢谢！

【解决方案3】：

这对我有用：

                renderItem={({ item }) => ( 
                  item.isDeleted == false ?  
                  <View>
                       <Activity isRunning={item.isRunning} />
                    </View>
                     : null
                )}
                keyExtractor={(item) => item.title}
              />

【讨论】：

【解决方案4】：

您是否希望返回两个不同的模板集？比如：

renderItem={({item, index}) => {
    if (index == 0) {
        return <View style={{flex: 1, flexDirection: 'row'}}>
                <Image source={item.image} style={styles.flatList_imageView} resizeMode="contain"/>
                </View>
    }

    return <View style={{flex: 1, flexDirection: 'row'}}>
            <Text>{item.key}</Text>
            </View>
}

【讨论】：

【解决方案5】：

我觉得对你有帮助

renderItem={({ item, index })=>
    <View>
        {index == 0 ? <Text>Some Text</Text> : <Text>Some Text</Text> }
    </View>
}}

【讨论】：