如何在 React Native FlatList 中使用 if 条件

Question

如何在 flatlist 的 react native 中使用 if 条件。我正在 React Native 创建一个社交应用程序，所以我创建了一个屏幕，在该屏幕中我使用 flatlist 呈现所有用户，所以我只希望每当该用户的状态为零时，这意味着他不再是该用户的朋友我在 flatlist 中的按钮应该是 'add friend'，否则它应该是 'unfriend'。或者用更简单的话来说，当 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>
      )
    }}
  />

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

Answer 2

你可以这样做：

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

如何在 React Native FlatList 中使用 if 条件

how to use if condition in react native flatlist

react-native

react-native-flatlist