使用嵌套的反应导航来反应本机HOC

Question

I have a HOC used to pass react's Context as props to any component (a similar functionality and structure to redux):

import React from 'react';

import { GlobalContext } from './context';

export const globalContext = (mapStateToProps = state => ({ ...state })) => Children => props => (
  <SignUpContext.Consumer>
    {state => (<Children {...mapStateToProps(state)} {...props} />)}
  </SignUpContext.Consumer>
);

This works as expected in normal components but when I try to use with a nested react navigator an error is thrown because cant access to the static router.

If I use either navigation or HOC It works but I can't manage to make both of them work

This would be a theoretical example of HOC and navigation:

import globalContext from './context'
import Screen from './screen';
import Screen2 from './screen2';

const MainStack = createBottomTabNavigator({
    Screen: {screen: globalContext()(Screen)},
    Screen2,
});

export default class Main extends Component {
  static router = MainStack.router;
  render() {
    console.log(this.props.navigator); //does exist
    return (
      <View >
      { /*some component over all navigator*/}
      <MainStack navigator={this.props.navigator} />
      </View>
    )
  }
}

ok, that failed but while I was editing I realized that It was stupid to use the class so it worked just exporting the createBottomTabNavigator

Answer 1

Wrap each screen by HOC then pass it to navigation may be helped.

 import globalContext from './context' import Screen from './screen'; import Screen2 from './screen2'; const MainStack = createBottomTabNavigator({ globalContext()(Screen), globalContext()(Screen2), }); export default MainStack;