Question

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

这在正常组件中可以正常工作，但是当我尝试使用嵌套的React导航器时，由于无法访问静态路由器而抛出错误。

如果我使用导航或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;

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

1 个答案: