反应导航Navigationoptions功能组件挂钩

Question

对不起，标题的措辞不好，我的NavigationOptions在功能组件中带有react-navigation时遇到问题，我为主题使用了自定义钩子。 我包装了组件，然后使用withTheme挂钩。

问题本身是，无论我对NavigationOptions做什么，它都不会改变标题

这是我度过难关的组件：

HomeScreen = ({ theme }) => {
  return (
   ...
  );
};

HomeScreen.navigationOptions = {
  title: 'Dashboard',
  headerTintColor: 'white',
  headerStyle: {
    borderBottomWidth: 0,
    backgroundColor: 'red',
  },
  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>
  ),
}

const style = StyleSheet.create({
  ...
}
});

export default withTheme(HomeScreen);

还有themeProvider组件

const STORAGE_KEY = 'THEME_ID';
const ThemeContext = React.createContext();

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}
      />
    );
  };
}

标题图片：

有人可以告诉我我想念什么吗？

Answer 1

您使用的是React Navigation 4.x还是较新的5.x？

在较新的版本中，只需在导航器中声明屏幕时就可以定义选项，例如在此升级文档https://reactnavigation.org/docs/upgrading-from-4.x/#specifying-navigationoptions-for-a-screen中。

不确定版本4，因为我个人没有在该版本中使用导航选项。

Answer 2

显然，我仍在使用react-navigation v3而不是v4-升级库后，问题消失了，我可以在抽屉组件中使用navigationOptions并弹出标题。