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

React Navigation V5, TabNavigation 分享道具

React Navigation V5, TabNavigation sharing props

react-native

react-navigation

expo

react-navigation-v5