React Native中切换Switch时如何展示不同的环形图数据？

你遇到的"data" is read-only错误，是因为data是用const声明的常量，JavaScript不允许重新赋值const变量。另外，就算改成let，直接修改普通变量也不会触发React组件重新渲染，环形图也不会更新数据。

下面提供两种可行的解决方案：

方案1：用useState管理数据状态 #

把展示数据纳入React状态管理，切换Switch时同步更新数据状态：

import { React, useState } from "react";
import { Switch, View } from "react-native";
import { DonutChart } from "react-native-circular-chart";

const ResultScreen = ({ navigation }) => {
  const [isEnabled, setIsEnabled] = useState(false);
  // 初始化数据状态
  const [chartData, setChartData] = useState([
    { name: "Privacy", value: 30, color: "blue" },
    { name: "Integriteit", value: 20, color: "green" },
    { name: "Collegialiteit", value: 15, color: "pink" },
    { name: "Slaap", value: 35, color: "red" },
  ]);

  const toggleSwitch = () => {
    const newData = isEnabled 
      ? [
          { name: "Privacy", value: 30, color: "blue" },
          { name: "Integriteit", value: 20, color: "green" },
          { name: "Collegialiteit", value: 15, color: "pink" },
          { name: "Slaap", value: 35, color: "red" },
        ]
      : [
          { name: "Honor", value: 50, color: "blue" },
          { name: "Usage 2", value: 10, color: "green" },
          { name: "Usage 3", value: 10, color: "pink" },
          { name: "Usage 4", value: 30, color: "red" },
        ];
    setChartData(newData);
    setIsEnabled(prev => !prev);
  };

  return (
    <View>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
      <DonutChart
        data={chartData}
        strokeWidth={15}
        radius={100}
        containerWidth={500}
        containerHeight={500}
        type="butt"
        startAngle={0}
        endAngle={360}
        animationType="slide"
      />
    </View>
  );
};

export default ResultScreen;

方案2：根据isEnabled动态计算数据（更推荐） #

因为两组数据是静态的，不需要存到状态里，直接在渲染时根据isEnabled的值返回对应数组即可，代码更简洁：

import { React, useState } from "react";
import { Switch, View } from "react-native";
import { DonutChart } from "react-native-circular-chart";

const ResultScreen = ({ navigation }) => {
  const [isEnabled, setIsEnabled] = useState(false);

  // 定义两组静态数据
  const dataSet1 = [
    { name: "Privacy", value: 30, color: "blue" },
    { name: "Integriteit", value: 20, color: "green" },
    { name: "Collegialiteit", value: 15, color: "pink" },
    { name: "Slaap", value: 35, color: "red" },
  ];
  const dataSet2 = [
    { name: "Honor", value: 50, color: "blue" },
    { name: "Usage 2", value: 10, color: "green" },
    { name: "Usage 3", value: 10, color: "pink" },
    { name: "Usage 4", value: 30, color: "red" },
  ];

  const toggleSwitch = () => {
    setIsEnabled(prev => !prev);
  };

  return (
    <View>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
      <DonutChart
        data={isEnabled ? dataSet2 : dataSet1}
        strokeWidth={15}
        radius={100}
        containerWidth={500}
        containerHeight={500}
        type="butt"
        startAngle={0}
        endAngle={360}
        animationType="slide"
      />
    </View>
  );
};

export default ResultScreen;

关键说明 #

• 方案2无需额外维护数据状态，当isEnabled变化时，组件自动重新渲染并切换数据组，性能和代码简洁性更优。
• 注意在返回的JSX中添加Switch组件（原代码未渲染该组件，无法触发切换操作）。

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