React Navigation V5, реквизиты для совместного использования TabNavigation - PullRequest
Новая
       102

React Navigation V5, реквизиты для совместного использования TabNavigation

0 голосов
/ 11 апреля 2020

В мае экран панели инструментов, созданный с помощью createMaterialTopTabNavigator и имеющий 5 экранов. Я хочу добиться этого, например, после выполнения некоторой функции в screen1, затем я хочу, чтобы screen2 сделал указанную c функцию, без повторного рендеринга экрана. Поэтому моя проблема заключалась в том, как связать вкладки и узнать друг о друге. Я хочу поделиться состоянием между экранами или реквизитом. Это мой код 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> 
  );
}

1 Ответ

1 голос
/ 11 апреля 2020

Я имею в виду, что вам следует обернуть вас 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>;
};
...