React Native：放置全局状态变量的位置

我正在开发我的第一个 React Native，我再次需要一些帮助。 我的应用程序有一种状态 - 运动，这对于组件、屏幕等非常重要。根据所选的运动，我也会加载不同的样式、图像和 api 信息。 将有一个模式，用户可以从中更改运动。模式现在是 Header 组件的一部分，而 Header 组件又是 Screen 组件的一部分。

所以我的问题是如何或在哪里放置这个运动状态变量，这样我就可以在任何地方访问它并进行更改以更新新样式等。

该应用程序的概述如下：

App.js

    import AppContext from './utility/context';
    
    export default function App() {
        
          const [sport, setSport] = React.useState('soccer');
          const state = {sport, setSport};
        
          return (
             <AppContext.Provider sport={state}>
                <OfflineNotice />
                <Screen />
             </AppContext.Provider>
          );
        }

上下文.js

import React from "react";

export const AppContext = React.createContext({
    sport: 'soccer', 
    setSport: () =>{}
});

屏幕.js

export default function Screen ({children}) {
    return (
        <>
        <Header />
        <SafeAreaView style={styles.screen}>
            <View style={styles.container}>{ children }</View>
        </SafeAreaView>
        <TabNavigator i18n={i18n}/>
        </>
    );
}

在 Header.js 中，我还将使用该未来状态，但目前没有什么有趣的。 但这里将是视图，用户可以从中更改运动状态变量。

HomeScreen.js - 它是 TabNavigator 的第一个屏幕

export default function HomeScreen({ navigation }) {

  const today = Moment(new Date().getTime()).format('YYYY-MM-DD');
  const [predictions, setPredictions] = useState([]);
  const [loading, setLoading] = useState(true);
  const params = {
    lang: 'en',
    date: today,
    sport: 'soccer',
  };

  ...

}

这里的运动状态是硬编码的，因为我还不知道如何继续。

我听说过 Redux，但我还没有使用它，所以如果有任何不使用 Redux 的解决方案，我将不胜感激。

先感谢您！

您可以使用以下方法实现此目的反应上下文 https://reactjs.org/docs/context.html

您可以简单地在 app.js 中拥有一个状态，并使用上下文在应用程序中任何需要的地方访问它。

首先您需要创建上下文。如果是单独的文件就更好了

const AppContext = React.createContext({sport:'value',setSport=()=>{}});

这里的默认值是选项，但当您使用打字稿以避免警告时特别推荐。

现在你必须在你的 app.js 中使用它，如下所示

export default function App() {
  const [sport,setSport] = React.useState('value');
  
  const state={sport,setSport};
  ...

  return (
    <AppContext.Provider value={state}>
      <OfflineNotice />
      <Screen />
    </AppContext.Provider>
  );
}

您必须导入上下文并使用提供程序作为包装器，设置您拥有的本地状态的值。现在您可以在树中的任何位置访问它并根据需要进行修改。

// 使用 useContext 钩子访问上下文，该组件应该位于树中，并且您应该导入 AppContext

const {sport,setSport} = useContext(AppContext);

你可以像下面这样显示它

<Text>{sport}</Text>

或者像下面这样设置

<Button title="Set Value" onPress={()=>{setSport('value')}}>

这个例子只是一个字符串，但你甚至可以有一个对象。