与react-native类static和react上下文冲突（高阶组件）

Question

（澄清一下，我使用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上。

Answer 1

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

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

const withFirebaseNavigateScreen = withFirebase(NavigateScreen);

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

export default withFirebaseNavigateScreen;