Question

我有一个使用反应导航的应用程序，并且我有主题系统，如果用户选择一种特定的颜色，它将把所有屏幕背景更改为所选的颜色。我想对react-navigation做同样的事情，例如，如果某人选择绿色，则react-navigation标头backgroundcolor也将为绿色。

这是我的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}
      />

    );
  };
}

已经使用主题背景的屏幕示例

ArchivedScreen = ({ theme, navigation }) => {
  return (
    <View style={[style.container, { backgroundColor: theme.backgroundColor }]}>
                    <Button title="Open drawer" onPress={() => navigation.openDrawer()} />

    </View>
  );
};



const style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontWeight: 'bold',
  },
});

export default withTheme(ArchivedScreen);

我的问题确实是，我该怎么办？

这是我的抽屉导航器：

  const drawerNavigator = createDrawerNavigator({

    Home: HomeStack,
    Tasks: {
      screen: TasksStack,
      navigationOptions: {
        drawerLabel: 'Task manager - -'
      }
    },
    Completed: {
      screen: CompletedStack,
      navigationOptions: {
        drawerLabel: 'Completed -'
      }
    },
    Archived: {
      screen: ArchivedStack,
      navigationOptions: {
        drawerLabel: 'Archived -',
      },

    },
    Calendar: CalendarStack,
    Notifications: NotificationStack,
    Settings: SettingsStack,
    Account: AccountStack,
  }); 


  HomeScreen.navigationOptions = {
    title: 'Dashboard',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    },
  }

  CompletedScreen.navigationOptions = {
    title: 'Completed tasks',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  TaskScreen.navigationOptions = {
    title: 'Tasks',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  ArchivedScreen.navigationOptions = {
    title: 'Archived tasks',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  AccountScreen.navigationOptions = {
    title: 'Account',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  CalendarScreen.navigationOptions = {
    title: 'Calendar',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  NotificationScreen.navigationOptions = {
    title: 'Notifications',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  SettingsScreen.navigationOptions = {
    title: 'Settings',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }


export default drawerNavigator;

如您所见，我正在尝试将backgroundColor用作所选主题以用作标题背景色。

我试图包装导航器以使用withTheme钩子，然后导出为export default withTheme(drawerNavigator);，但是返回的结果是它找不到变量主题，并在加载应用程序时变成循环？

有人可以启发我如何去做吗？我是反应导航的新手。

如何基于AsynStorage值动态更改反应导航标题样式？

0 个答案: