React Navigation V5、TabNavigation 分享道具

Question

5 月使用createMaterialTopTabNavigator 创建的仪表板屏幕，有 5 个屏幕。 我想实现这一点，例如在 screen1 中执行某些功能之后，然后我希望 screen2 执行特定功能，而无需再次渲染任何屏幕。 所以我的问题是如何使选项卡连接并相互了解。 我希望在屏幕或道具之间共享状态。 这是我的仪表板代码（摘要）。

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

Answer 1

我的意思是你应该用一些状态提供者包裹你 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>;
};