React Native如何修改FlatList点击行内按钮对应行的背景色

你当前的代码已经实现了存储点击行下标的逻辑，仅需补充动态样式关联、修复小的状态更新问题即可实现需求，修改后的完整可运行代码如下：

import { useState, useCallback } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useFocusEffect } from '@react-navigation/native';

// 你之前未定义的widtht可以用屏幕宽度代替，根据自己需求调整
const widtht = Dimensions.get('window').width;

export default function Listt () {
    // 存储当前选中的行下标
    const [click, setClick] = useState(null);
    const [productsData, setproductsData] = useState([]);

    const ItemView = ({item, index}) => {
      return (
        <TouchableOpacity 
          // 动态样式：当前行是选中状态就用选中背景色，否则用默认样式
          style={[
            styles.row, 
            {backgroundColor: click === index ? '#a8d1ff' : 'transparent'}
          ]} 
          onPress={() => {setClick(index);}}
        >
          <View>
            <Text style={styles.rowtext}>
              {item[0]+ '  ' + item[1]}
            </Text>
          </View>
        </TouchableOpacity>
      );
    };

    async function loadInState() { 
      const keys = await AsyncStorage.getAllKeys();  
      const result = await AsyncStorage.multiGet(keys);
      // 改成函数式更新，避免闭包导致读取到旧的productsData
      setproductsData(prev => [...prev, ...result]);
      // 如果不需要每次进入页面都追加旧数据，想每次刷新就替换的话改成下面的写法
      // setproductsData(result);
    }


    useFocusEffect(
      useCallback(() => {
          loadInState()        
      }, [])
    );

    return (
      <View style={styles.container}>
        <FlatList
        data={productsData}
        renderItem={ItemView}
        keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
};

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  row: {
    width: widtht,
    height:45,
    borderWidth: 2, 
    borderColor: 'black',
    justifyContent: 'center',
    alignItems:'center',
  },
  rowtext:{
    fontSize:17,
  },
});

主要修改点说明 #

• 动态绑定行背景色：将TouchableOpacity的style属性改为数组格式，通过click === index判断当前行是否被选中，动态赋值背景色，你可以替换#a8d1ff为自己想要的颜色
• 修复状态更新闭包问题：将setproductsData的入参改为函数式更新，避免依赖外部状态导致的旧数据重复追加问题，如果不需要每次进入页面累加数据，直接将更新逻辑替换为覆盖写入即可
• 清理了样式中重复且无效的textAlign属性：textAlign是文本样式，放在View样式上不会生效

如果需要实现多选效果，只需将click状态改为数组类型，点击时判断当前下标是否在数组内，存在就移除、不存在就加入数组，判断背景色的时候换成数组includes判断即可。

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