React Native HOC 与嵌套的 react-navigation

Question

我有一个 HOC 用于将 react 的 Context 作为 props 传递给任何组件（与 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>
);

这在普通组件中按预期工作，但是当我尝试与嵌套反应导航器一起使用时，由于无法访问静态路由器而引发错误。

如果我使用导航或 HOC 它可以工作，但我无法让它们都工作

这将是 HOC 和导航的理论示例：

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

好的，那失败了，但是在我编辑的时候我意识到使用这个类很愚蠢，所以它只需要导出 createBottomTabNavigator 就可以了

Answer 1

通过 HOC 包装每个屏幕，然后将其传递给导航可能会有所帮助。

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

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

export default MainStack;