在使用createMaterialTopTabNavigator
创建的仪表板屏幕中,有5个屏幕。我想例如在screen1中执行某些功能后实现该功能,然后我希望screen2进行特定功能,而无需再次渲染任何屏幕。所以我的问题是如何使这些选项卡连接起来并相互了解。我希望在屏幕或道具之间共享状态。那是我的DashBoard代码(摘要)。
function Switch0({navigation, route}) {return <Screen0 navigation = {navigation} route={route}/>}
function Switch1({navigation, route}) {return <Screen1 navigation = {navigation} route={route}/>}
function Switch2({navigation, route}) {return <Screen2 navigation = {navigation} route={route}/>}
function Switch3({navigation, route}) {return <Screen3 navigation = {navigation} route={route}/>}
function Switch4({navigation, route}) {return <Screen4 navigation = {navigation} route={route}/>}
export default class DashBoard1 extends React.Component {
render(){
return (
<Tab.Navigator>
<Tab.Screen name="MyTeams" component={Switch0} options={navigationOptions0} />
<Tab.Screen name="Matches" component={Switch1} options={navigationOptions1}/>
<Tab.Screen name="PlayerMarket" component={Switch2} options={navigationOptions2}/>
<Tab.Screen name="Courts" component={Switch3} options={navigationOptions3}/>
<Tab.Screen name="Tournaments" component={Switch4} options={navigationOptions4}/>
</Tab.Navigator>
);
}
[我是说您应该用状态提供程序包装AppContainer
。
import { StoreProvider } from 'store';
<StoreProvider>
<AppContainer />
</StoreProvider>
此商店提供者可以使用redux
创建。https://redux.js.org或者,如果您对钩子感到满意,则可以尝试React context Api
,并编写自己的动作和简化器。 https://reactjs.org/docs/context.html
import Reducer, { initialState } from './reducers';
import useActions from './actions';
export const Store = React.createContext();
export const StoreProvider = props => {
const { children } = props;
const [state, dispatch] = React.useReducer(Reducer, initialState);
const actions = useActions(state, dispatch);
const value = { state, dispatch, actions };
return <Store.Provider value={value}>{children}</Store.Provider>;
};