Question

在使用createMaterialTopTabNavigator创建的May Dashboard屏幕中，有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> 
  );
}

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共享道具

1 个答案: