reactjs - react native : where to place global state variables

Question

我正在开发我的第一个 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 中，我也会使用那个 future 状态，但目前没有什么有趣的。但这里是 View ，用户将从中更改运动状态变量。

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 的解决方案，我将不胜感激。

提前致谢!

Answer 1

您可以使用 React-Context 实现此目的

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

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

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

这里的默认值是选项，但在您使用 typescript 时特别首选以避免警告。

现在你必须像下面这样在你的 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 钩子(Hook)访问上下文，这个组件应该在树中，你应该导入 AppContext

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

你可以像下面这样显示

<Text>{sport}</Text>

或者像下面这样设置

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

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