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

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

reactjs react-native

Reactjs React Native：放置全局状态变量的位置,reactjs,react-native,Reactjs,React Native,我正在开发我的第一个React Native，我再次需要一些帮助。我的应用程序有一个状态-sport，它对组件、屏幕等都很重要。因此，我将加载不同的样式、图像和api信息。将有一个模式，用户可以从中更改运动。模式现在是标题组件的一部分，标题组件是屏幕组件的一部分所以我的问题是如何或者在哪里放置这个运动状态变量，这样我就可以在任何地方访问它，并在更改时更新新的样式等等该应用程序的概述如下所示： App.js import AppContext from './utility/con

我正在开发我的第一个React Native，我再次需要一些帮助。我的应用程序有一个状态-sport，它对组件、屏幕等都很重要。因此，我将加载不同的样式、图像和api信息。将有一个模式，用户可以从中更改运动。模式现在是标题组件的一部分，标题组件是屏幕组件的一部分

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

该应用程序的概述如下所示：

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

Screen.js

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

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

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

提前谢谢你

您可以使用

您只需在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>
  );
}

<Text>{sport}</Text>

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

你可以像下面那样展示它

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

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

<Text>{sport}</Text>

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

{sport}

或者设置如下

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

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

<Text>{sport}</Text>

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

{setSport（'value'）}>

此示例仅针对一个字符串，但您甚至可以拥有一个对象。