我正在开发我的第一个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>
);
}
context.js
import React from "react";
export const AppContext = React.createContext({
sport: 'soccer',
setSport: () =>{}
});
Screen.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的解决方案，我将不胜感激。
先感谢您！
您可以使用React-Context实现此目的
您可以简单地在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')}}>
这个例子只是一个字符串，但是你甚至可以有一个对象。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句