如何在React Native的FlatList中使用if条件动态渲染按钮

在JSX中实现条件渲染不需要单独写if分支，直接用三元运算符或者逻辑与运算符即可实现你要的效果，修改后的FlatList代码如下：

<FlatList
  data={this.state.user}
  keyExtractor={item => item.id}
  renderItem={({ item, index }) => {
    return (
      <View>
        <View style={{ flexDirection: 'row', marginTop: 10, }}>
          <Image style={{...}} source={{ uri: '' }} />
          <View>
            <Text style={{..}}>{item.full_name}</Text>
              <View>
                {/* 用三元运算符判断status值，按需渲染对应按钮 */}
                {
                  item.status === 0 ? 
                  (
                    <View>
                      <TouchableOpacity style={..} onPress={this.sendRequest}>
                        <Text style={styles.submitButtonText}>Add Friend</Text>
                      </TouchableOpacity>
                    </View>
                  ) : (
                    <View>
                      <TouchableOpacity style={styles.submitButton}>
                        <Text style={styles.submitButtonText}>Remove</Text>
                      </TouchableOpacity>
                    </View>
                  )
                }
                <View style={styles.space} />
              </View>
            </View>
          </View>
        </View>
      )
    }}
  />

实现说明 #

• 核心逻辑就是利用JSX支持嵌入表达式的特性，item.status === 0判断成立时返回加好友按钮的JSX结构，不成立则返回删除好友按钮的结构，不用把两个按钮都预先写在页面里。
• 注意不要把判断运算符===写成赋值运算符=，你原有代码里Text标签内的{item.status = 0 }是错误写法，会直接修改item的status值，需要删掉。
• 如果你需要保留两个按钮的独立结构，也可以用逻辑与运算符分别控制显隐：

// 写法二：逻辑与判断
{item.status === 0 && (
  <View>
    <TouchableOpacity style={..} onPress={this.sendRequest}>
      <Text style={styles.submitButtonText}>Add Friend</Text>
    </TouchableOpacity>
  </View>
)}
<View style={styles.space} />
{item.status !== 0 && (
  <View>
    <TouchableOpacity style={styles.submitButton}>
      <Text style={styles.submitButtonText}>Remove</Text>
    </TouchableOpacity>
  </View>
)}

• 额外注意你原代码中onPress的写法() => this.sendRequest不需要额外包一层箭头函数，直接写onPress={this.sendRequest}即可，要是方法需要传参再包箭头函数。

内容的提问来源于stack exchange，提问作者raja ali haider