React Native中点击按钮后修改FlatList选中项背景色的方法

我来帮你搞定这个需求！核心思路就是在跳转详情页时传递一个回调函数，当用户点击"Got it!"时，调用这个回调通知ProfileActivity把当前选中的项标记为已完成，然后更新FlatList的行背景色。下面是具体的修改步骤，顺便帮你修正原代码里的一些语法小问题：

1. 在ProfileActivity中添加状态记录已选中项 #

首先，给ProfileActivity的state新增一个selectedItems数组，用来存储所有已经点击过"Got it!"的项标识（这里用item的title作为唯一标识，如果你的数据有id字段，用id会更可靠）：

class ProfileActivity extends Component {
  state = {
    dataSource: [],
    selectedItems: [] // 新增：记录已选中的项
  }
  // ... 其他代码
}

2. 修改跳转逻辑，传递回调函数 #

把原有的GetFlatListItem改成箭头函数（避免bind的麻烦），并在跳转到Details页面时，额外传递一个onMarkAsDone回调函数，这个函数会在用户点击"Got it!"时被调用，用来更新ProfileActivity的状态：

GetFlatListItem = (Description, Tutorial, Imagen, Title) => {
  Alert.alert(Description);
  this.props.navigation.navigate('Fourth', {
    Tutorial,
    Imagen,
    Title,
    // 传递回调函数，通知父组件标记当前项为已完成
    onMarkAsDone: () => {
      this.setState(prevState => {
        // 避免重复添加同一个项
        if (!prevState.selectedItems.includes(Title)) {
          return {
            selectedItems: [...prevState.selectedItems, Title]
          }
        }
        return prevState;
      })
    }
  });
}

3. 修改FlatList的行样式，根据状态设置背景色 #

在renderItem里，判断当前项的title是否在selectedItems数组中，如果是就把背景色设为绿色：

renderItem={({item}) => 
  <View style={{
    flex: 1, 
    flexDirection: 'row',
    // 关键：根据选中状态设置背景色
    backgroundColor: this.state.selectedItems.includes(item.title) ? 'green' : 'transparent',
    paddingVertical: 8 // 加一点内边距，让背景色显示更自然
  }}>
    <Text style={styles.points}>+ {item.points}</Text>
    <Text style={styles.flatview} onPress={this.GetFlatListItem.bind(this, item.description, item.tutorial, item.image, item.title)} >{item.title}</Text>
  </View>
}

4. 修正Details类的语法并修改按钮点击逻辑 #

原代码的Details类缺少render()方法（语法错误），我们补上它，同时修改onPress方法，调用传递过来的回调后返回上一页：

class Details extends Component{
  onPress = () => {
    const { navigation } = this.props;
    // 调用父组件传递的回调，标记当前项为已完成
    navigation.state.params.onMarkAsDone();
    // 返回ProfileActivity页面
    navigation.goBack();
  }

  render() {
    return(
      <View style = { styles.MainContainer }>
        <TouchableHighlight style={styles.buttonStyle} onPress={this.onPress} >
          <Text> Got it! </Text>
        </TouchableHighlight>
        <Text style = {styles.TextComponentStyle}> { this.props.navigation.state.params.Title } </Text>
        <Image style={{width: 66, height: 58}} source={{uri: this.props.navigation.state.params.Imagen}} />
        <Text style = {styles.TextComponentStyle}> { this.props.navigation.state.params.Tutorial } </Text>
      </View>
    );
  }
}

这样修改后，每次从Details页面点击"Got it!"返回，对应的FlatList行就会变成绿色，而且多次操作不同的项，所有已处理的项都会保持绿色背景。

内容的提问来源于stack exchange，提问作者Hamsi