在组件之间共享状态

Question

我正在做一个业余爱好管理应用程序，我对 React-Native 中三个组件之间共享状态的机制感到困惑。

我的三个组件是：

1. 日程安排：

[...]
function Schedule() {
  return (
    <Stack.Navigator
      initialRouteName="Monday"
      screenOptions={{
        headerStyle: { backgroundColor: "#f58220" },
        headerTintColor: "#fff",
        headerTitleStyle: { fontWeight: "bold" },
        headerRight: () => <SwitchButton />,
      }}
    >
      <Stack.Screen
        name="TabStack"
        component={TabStack}
        options={{ title: "Aerobic Schedule" }}
      />
    </Stack.Navigator>
  );
}

export default Schedule;

我希望我的日程组件 (1.) 中的 SwitchButton 按钮在 [=64= 之间切换] 和 DATA_KIDS (2.)[=47 中 FlatList 的数组道具=] 基于 listAerobic 布尔变量的内容。

2. 星期一页面：

[...]
const MondayPage = () => {
  const [selectedId, setSelectedId] = useState(null);
  const [listAerobic, setListAerobic] = useState(true);

  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";

    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        style={{ backgroundColor }}
      />
    );
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, padding: 5 }}>
        <SafeAreaView style={styles.container}>
          <FlatList
            data={listAerobic ? DATA_AEROBIC : DATA_KIDS}
            renderItem={renderItem}
            keyExtractor={(item) => item.id}
            extraData={selectedId}
          />
        </SafeAreaView>
      </View>
    </SafeAreaView>
  );
};

但是，我不知道如何 link listAerobic 布尔变量到 SwitchButton 组件的状态(3.) ，以及如何打开和关闭它。

3. 开关按钮：

const SwitchButton = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);


  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
      <Text> aerobic/kids</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    marginRight: 5,
    padding: 5,
  }
});

export default SwitchButton;

任何指导都很棒！我提到我确实尝试过在不同的教程中查找它，但我似乎无法理解它的要点。这是我在 React/React-Native.

的第一个项目

非常感谢！

Answer 1

我认为您只需要 'value' 接受在切换按钮上传递给它的道具。然后无论你在哪里使用开关按钮，只需将布尔值从状态传递给它，例如

<SwitchButton enabled={this.state.switchEnabled}/>

至于设置状态 'globally' 所以 this.state.switchEnabled 可以从不同的地方更新/在整个应用程序中都可以访问你需要研究像 Redux 这样的状态管理工具（或者我听说 'React Hooks' 现在是首选....)