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>
  )}

我想根据单位列表的项目键来渲染其他渲染函数是否可以使用React Native Flatlist Base进行条件渲染在键上？

Answer 1

Flatlist的renderItem道具可以接受2个参数，第二个是索引，因此您可以执行

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

然后只需投入一个开关或一些if语句，您就可以有条件地进行渲染。

Answer 2

FlatList的项目似乎不接受条件渲染，因此最终我通过清除结果并将其传递给renderItem函数来解决了类似的问题。

Answer 3

您是否要返回两个不同的模板集？像这样：

projects/[project_id]/subscriptions/projects/[project_id]/subscriptions/subtestbucketthhh

Answer 4

我认为它将为您提供帮助

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

Answer 5

基于变量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}
/>

Answer 6

这对我有用：

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

React Native Flatlist条件渲染

6 个答案: