如何在反应原生 flatlist 中使用 if 条件答案

【问题标题】：how to use if condition in react native flatlist如何在反应原生 flatlist 中使用 if 条件
【发布时间】：2021-08-03 13:33:52
【问题描述】：

如何在 react native 的 flatlist 中使用 if 条件。我正在创建一个反应原生的社交应用程序，所以我创建了一个屏幕，在其中我使用flatlist 呈现所有用户，所以我只希望只要该用户的状态为零，这意味着他不再是该用户的朋友，然后我的按钮在 flatlist 中应该是“添加朋友”，否则应该是“取消朋友”。或者更简单地说，当 item.status===0 然后添加好友按钮显示，否则取消好友按钮显示。我的平面列表就是这样。

<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>
                 //if item.status==0 below code works
                <View>
                  <TouchableOpacity style={..} onPress={() => this.sendRequest}>
                    <Text style={styles.submitButtonText}>{item.status = 0 }Add Friend</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.space} />
                <View>
                  <TouchableOpacity style={styles.submitButton}>
                    <Text style={styles.submitButtonText}>Remove</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </View>
        </View>
      )
    }}
  />

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

你可以这样写：

<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>
                {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>}
              </View>
            </View>
          </View>
        </View>
      )
    }}
  />

这是您可以根据item.status 值有条件地渲染按钮的方法。

说明：如果你想在 React 中有条件地渲染某些东西（按钮、div...），你必须将 html 组件包含在 {} 括号中，然后添加布尔条件。

所以在你的情况下：

{item.status === 0 && //<-- this html will be rendered only if item.status is equal to 0
   <View>
      <TouchableOpacity style={..} onPress={() => this.sendRequest}>
         <Text style={styles.submitButtonText}>Add Friend</Text>
      </TouchableOpacity>
   </View>}

 {item.status !== 0 && //<-- this html will be rendered only if item.status is different from 0
    <View>
       <TouchableOpacity style={styles.submitButton}>
          <Text style={styles.submitButtonText}>Remove</Text>
       </TouchableOpacity>
    </View>}

【讨论】：

【解决方案2】：

你可以这样做：

{item.status === 0 && (
  // ... code to render
)}

【讨论】：