如何使特定组件在平面列表中发挥作用？

Question

我正在制作一个应用程序，任何人都可以在其中参加梦幻高尔夫锦标赛。在我的主页上有一个平面列表，它正在从 api 接收数据。会有很多比赛，但用户只能参加即将到来的比赛。现在我想做的是禁用所有其他锦标赛的功能，这意味着有一个加入按钮，用户可以通过该按钮加入，所以我想禁用所有其他按钮，只启用即将到来的锦标赛按钮。我该怎么办？

这是我的代码

const Item = ({ title, location, date, Id }) => (
    <View style={styles.renderItemView}>
      <View style={styles.imageView}>
        <Image style={styles.imageView2} source={require('../../assets/golf.png')} />
      </View>
      <View style={styles.TextView}>
        <Text style={styles.Text}>Name: {title}</Text>
        <Text style={styles.Text}>Location: {location}</Text>
        <Text style={styles.Text}>StartDate: {moment(date).format('DD-MM-YYYY')}</Text>
        <Text style={styles.Text}>Contest Fee: </Text>
      </View>
      <View style={styles.JoinView}>
        <TouchableOpacity onPress={() =>{
          navigation.navigate('Join', {key:Id, date});
         }} style={styles.Touch1}>
          <Text style={styles.JoinText}>Join</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  const renderItem = ({ item }) => (
    <View>
      <Item title={item.name} location={item.location} date={item.startDate} Id={item.Id} />
    </View>
  );```

Answer 1

您可以使用行索引和模数运算符来定义禁用的属性，如下所示：

  const renderItem = ({ item, index }) => (
    <View>
      <Item title={item.name} disabled={index % 1 === 1} location={item.location} date={item.startDate} Id={item.Id} />
    </View>
  );`

然后像这样在 TouchableOpacity 的 Item 组件中使用它：

const Item = ({ disabled }) => (
   <View>
    ...other stuff
    <TouchableOpacity disabled={disabled} />
   </View>
)
<TouchableOpacity disabled={props.disabled} />

如何使特定组件在平面列表中发挥作用？

How to make specific component functional in a flatlist?

react-native