与 react-native 类静态和反应上下文冲突（高阶组件）答案

【问题标题】：Conflict with react-native class static and react context(High Order Component)与 react-native 类静态和反应上下文冲突（高阶组件）
【发布时间】：2019-01-29 08:43:48
【问题描述】：

（澄清我使用 expo init 制作了我的应用程序）

我试图混合使用 firebase 和 react-native 并遇到了这个问题

NavigateScreen.js

 class NavigateScreen extends React.Component {
        static navigationOptions = {
            title: 'Campus Navigator',
            headerStyle: {
              backgroundColor: '#ffa000',
              borderBottomColor: 'black',
              borderBottomWidth: 0,
            },
          };

    ...

    }

    export default withFirebase(NavigateScreen);

context.js

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

基本上它会将一个 firebase 实例传递给一个组件。但问题是静态navigationOptions 不会出现在GUI 上。

【问题讨论】：

标签： reactjs firebase react-native react-navigation expo

【解决方案1】：

高阶组件不会将静态导航选项传递（除非特别实现）给子组件。

您可以使用以下结构解决此问题。

const withFirebaseNavigateScreen = withFirebase(NavigateScreen);

withFirebaseNavigateScreen.navigationOptions = ({ navigation }) => ({
  title: 'Campus Navigator',
  headerStyle: {
    backgroundColor: '#ffa000',
    borderBottomColor: 'black',
    borderBottomWidth: 0,
  },
});

export default withFirebaseNavigateScreen;

【讨论】：