与反应原生类静态和反应上下文(高阶组件)冲突

Question

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

我试图混合火基和反应原生，遇到了这个问题

导航屏幕.js

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

上下文.js

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

基本上，它会将Firebase实例传递给组件。 但问题是静态导航选项不会出现在 GUI 上。

Answer 1

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

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

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