React Native如何实现各View独立修改背景色并保存点击状态

问题根源 #

你当前所有视图共用了同一个changBack状态，任意触发状态更新都会同步修改所有绑定该状态的视图样式，这是联动变色的核心原因。同时当前没有做状态持久化存储，App重启后选中状态会丢失。

解决方案 #

我们需要调整状态结构存储每个任务的独立选中状态，同时接入持久化能力实现重启后状态留存：

• 将单值状态改为对象结构，用任务唯一标识作为key存储对应选中状态
• 点击时只修改当前触发任务对应的状态值
• 接入AsyncStorage做状态持久化，组件初始化时读取存储的状态

第一步：安装持久化依赖 #

npm install @react-native-async-storage/async-storage
# 或者用yarn
yarn add @react-native-async-storage/async-storage

修正后的完整代码 #

import React, { useState, useEffect } from 'react';
import { 
   SafeAreaView, 
   View,
   FlatList, 
   StyleSheet, 
   Text,
   TouchableOpacity, 
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 存储key常量，避免拼写错误
const STORAGE_KEY = 'task_selected_status';

function App() {
  // 状态结构为 { [任务id]: 是否选中 }
  const [selectedStatus, setSelectedStatus] = useState({
    'task1': false,
    'task2': false
  });

  // 组件初始化时读取本地存储的选中状态
  useEffect(() => {
    const loadSavedStatus = async () => {
      try {
        const saved = await AsyncStorage.getItem(STORAGE_KEY);
        if (saved) {
          setSelectedStatus(JSON.parse(saved));
        }
      } catch (e) {
        console.log('读取选中状态失败', e);
      }
    }
    loadSavedStatus();
  }, []);

  // 点击切换指定任务的选中状态
  const toggleTaskStatus = async (taskId) => {
    const newStatus = {
      ...selectedStatus,
      [taskId]: !selectedStatus[taskId]
    };
    setSelectedStatus(newStatus);
    // 新状态持久化存储到本地
    try {
      await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(newStatus));
    } catch (e) {
      console.log('保存选中状态失败', e);
    }
  }
  
  const DATA1 = {id: 'task1', content: 'Task one'};
  const DATA2 = {id: 'task2', content: 'Task two'};

  return (
    <View style={styles.container}>
      <TouchableOpacity
       style={{
        flex: 1,
        // 选中则变红，未选中默认绿色
        backgroundColor: selectedStatus[DATA1.id] ? 'red' : 'green',
        padding: 20,
       }}  
       onPress={() => toggleTaskStatus(DATA1.id)}>
        <View>
          <Text>{DATA1.content}</Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
       style={{
        flex: 1,
        backgroundColor: selectedStatus[DATA2.id] ? 'red' : 'green',
        padding: 20,
       }}  
       onPress={() => toggleTaskStatus(DATA2.id)}>
        <View>
          <Text>{DATA2.content}</Text>
        </View>
      </TouchableOpacity>
   
    </View>
  );
  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    textAlign:'right',
    justifyContent:'space-evenly',
  },
});

export default App;

逻辑说明 #

• 每个任务绑定唯一id，状态中单独存储每个id的选中情况，点击时只会修改对应id的状态，不会影响其他任务
• 每次状态更新都会同步写入本地存储，App重启后会优先读取本地存储的状态渲染，实现选中状态留存
• 如果后续需要新增任务，只需要在DATA里加对应id和内容，状态会自动适配，不需要额外修改逻辑

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