簡體   English   中英

在組件之間共享 state

[英]Share state between components

我正在開發一個愛好健身房管理應用程序,我對在 React-Native 中的三個組件之間共享 state 的機制感到困惑。

我的三個組成部分是:

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;

我希望我的 Schedule 組件(1.)中的SwitchButton按鈕根據listAerobic boolean 變量的內容在(2.)FlatListDATA_AEROBICDATA_KIDS arrays 道具之間交替。

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>
  );
};

但是,我不知道如何將listAerobic boolean 變量鏈接到SwitchButton組件(3.)的 state ,以及如何使其打開和關閉。

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 中的第一個項目。

非常感謝!

我認為您只需要“價值”就可以接受在開關按鈕上傳遞給它的道具。 然后,無論您使用開關按鈕,只需將 boolean 值從 state 傳遞給它,例如

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

As for setting state 'globally' so this.state.switchEnabled can be updated from various places / accessible all over the app you need to look into state management tools like Redux (or I hear 'React Hooks' is now a thing and preferred. ...)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM