起重反应导航静态导航选项

Question

[我有几个使用React-Navigation的类组件，当我包装类组件以使用HOC时，标题消失了，经过一些研究，似乎我需要提升static navigationOptions = {}

我的themeProvider

export const ThemeContextProvider = ({ children }) => {
  const [themeID, setThemeID] = useState();
  useEffect(() => {
    (async () => {
      const storedThemeID = await AsyncStorage.getItem(STORAGE_KEY);
      if (storedThemeID) setThemeID(storedThemeID);
      else setThemeID(THEMES[1].key);
    })();
  }, []);

  return (
    <ThemeContext.Provider value={{ themeID, setThemeID }}>
      {!!themeID ? children : null}
    </ThemeContext.Provider>
  );
};

export function withTheme(Component) {

  return props => {
    const { themeID, setThemeID } = useContext(ThemeContext);
    const getTheme = themeID => THEMES.find(theme => theme.key === themeID);
    const setTheme = themeID => {
      AsyncStorage.setItem(STORAGE_KEY, themeID);
      setThemeID(themeID);
    };

    return (
      <Component
        {...props}
        themes={THEMES}
        theme={getTheme(themeID)}
        setTheme={setTheme}
      />
    );
  };
  hoistNonReactStatics(withTheme, HomeScreen); //I've tried this, but header still does not show up.
}

正在讨论的组件

export class HomeScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'Dashboard',
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: 'red',
      borderBottomWidth: 0,
    },
    headerLeft: (
      <TouchableOpacity
        style={{ paddingLeft: 15 }}
        onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
      >
        <Feather name="arrow-left" size={24} color="#ffffff" />
      </TouchableOpacity>
    ),
    headerRight: (
      <View style={{ flexDirection: 'row' }}>

      </View>
    ),
  });


  componentDidMount() {
   ...
    }



  render() {
    const { theme } = this.props;
    console.log(theme);
    return this.state.loading ? (
      <ActivityIndicator
        color="red"
        size="large"
        style={{ alignSelf: 'center', flex: 1 }}
      />
    ) : (
      <View style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
        <View style={styles.container2}>
          <TouchableOpacity>
            <Feather
              style={{ top: '60%', left: '28%' }}
              name="plus"
              size={32}
              color="#ffffff"
              onPress={this._openNewTaskModal}
            />
          </TouchableOpacity>
          <TouchableOpacity>

          </TouchableOpacity>
        </View>
         <Feather
              style={{  bottom: '5%', left: '85%' }}
              name="calendar"
              size={22}
              color="#ffffff"
            />
               <Feather
              style={{  bottom: '9%', left: '8%' }}
              name="home"
              size={22}
              color="#ffffff"
            />
      </View>

    );
  }
}

export default withTheme(HomeScreen);

});

我还尝试将其导出为HomeScreen中的hoistNonReactStatics，但没有运气，我还缺少什么？

Answer 1

解决方案是使用

export default hoistNonReactStatics(withTheme(HomeScreen), HomeScreen);