React Hooks：根据 dark/light 模式首选项动态更新 stackNavigator 颜色

Question

我正在使用 dark/light 模式 到我的应用程序中，同时使用 React Hooks 我不确定如何制作我的 StackNavigator 的组件或将道具传递到 StackNavigator。如何将 colors 从我的 theme 传递到我的 StackNavigator？请你能帮帮我 :)

App.js

 <AppearanceProvider>
     <SwitchNavigator />
 </AppearanceProvider>

Theme/Index.js

const palette = {
  black: "#000000",
  white: "#ffffff",
  yellow: '#F1C40F',
  blue: '#21D2FF',
  red: '#F8564F',
  darkGreen: "#27AE60",
  gray: '#404040',
  lightGray: "#cdcdcd",
  darkGray: "#303030",
};

export const colors = {
  buttonYellowyBg: palette.yellow,
  buttonBlueBg: palette.blue,
  buttonRedBg: palette.red,
  buttonPrimaryBg: palette.darkGreen,
  buttonPrimaryBorderColor: palette.darkGreen,
  buttonPrimaryColor: palette.white,
  buttonPrimaryShadowColor: palette.lightGray,
  keyBoardAvoidingViewColor: palette.white,
  navPrimaryColor: palette.white
}

export const themedColors = {
  default: {
    ...colors,
  },
  light: {
    ...colors,
  },
  dark: {
    ...colors,
    buttonPrimaryBg: palette.darkGray,
    buttonPrimaryColor: palette.white,
    buttonPrimaryBorderColor: palette.darkGray,
    buttonPrimaryShadowColor: palette.darkGray,
    buttonYellowyBg: palette.darkGray,
    buttonBlueBg: palette.darkGray,
    buttonRedBg: palette.darkGray,
    buttonRedBg: palette.darkGray,
    keyBoardAvoidingViewColor: palette.darkGrayB,
    navPrimaryColor: palette.darkGrayB,
  }
};

Theme/Hooks.js

import { useColorScheme } from 'react-native-appearance'
import { themedColors } from '.'

export const useTheme = () => {
  const theme = useColorScheme()
  const colors = theme ? themedColors[theme] : themedColors.default
  return {
    colors,
    theme,
  }
}

这是我如何使用颜色的示例： Components/TextInput.js

import React from "react";
import { TextInput } from "react-native";
import { useTheme } from "../../theme/hooks";

const MyTextInput = ({
  placeholder,
  value,
  onChangeText,
  onSubmitEditing
}) => {
  const { colors } = useTheme();
  return (
    <TextInput
      style={{
        color: colors.inputTextColor,
        marginRight: "5%",
        marginLeft: "5%",
        padding: 10,
        fontSize: 25,
        borderColor: colors.inputTextColor,
        borderBottomWidth: 1
      }}
      placeholder={placeholder}
      value={value}
      onChangeText={onChangeText}
      onSubmitEditing={onSubmitEditing}
    />
  );
};

export default MyTextInput;

我如何做类似的事情或将颜色道具传递给：StackNavigator.js

import * as React from "react";
import { TouchableOpacity, Alert, StyleSheet, Text } from "react-native";
import MainScreen from "../screens/Main";
import LoginScreen from "../screens/signup/Login";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

const authNavigator = createStackNavigator(
  {
    Main: {
      screen: MainScreen,
      navigationOptions: {
        headerShown: false
      }
    },
    Login: {
      screen: LoginScreen,
      navigationOptions: ({ navigation }) => ({
        title: navigation.state.params.title,
        headerTintColor: "#404040",
        headerTitleStyle: {
          color: "#404040",
          fontSize: 25,
          fontFamily: "gadugi"
        },
        headerBackTitleStyle: {
          color: "#404040",
          fontFamily: "roboto"
        },
        headerStyle: {
          elevation: 0,
          shadowOpacity: 0,
          borderBottomWidth: 0,
        }
      })
    }
  },
  {
    initialRouteName: "Main",
    defaultNavigationOptions: {
      headerBackTitle: null
    }
  }
);

export default createAppContainer(authNavigator);

Answer 1

所以最近React-navigation v5的稳定版出来了。

这让我可以像这样传递我的主题和颜色：

import { useTheme } from "../theme/hooks";

... 

const Stack = createStackNavigator();

function Auth() {
  const { colors } = useTheme();
  return (
    <Stack.Navigator
      initialRouteName="Main"
      screenOptions={{
        headerBackTitle: " ",
        headerTintColor: colors.navTextPrimaryColor,
        headerTitleStyle: {
          color: colors.navTextPrimaryColor,
          fontSize: 25,
          fontFamily: "gadugi"
        },
        headerBackTitleStyle: {
          color: colors.navTextPrimaryColor,
          fontFamily: "roboto"
        },
        headerStyle: {
          elevation: 0,
          shadowOpacity: 0,
          borderBottomWidth: 0,
          backgroundColor: colors.navPrimaryColor
        }
      }}
    >
      <Stack.Screen
        name="Main"
        component={MainScreen}
        options={{
          headerShown: false
        }}
      />
      <Stack.Screen name="Login" component={LoginScreen} options={{title: ' '}}/>
    </Stack.Navigator>
  );
}

export default Auth;

React Hooks：根据 dark/light 模式首选项动态更新 stackNavigator 颜色

React Hooks: Dynamically update stackNavigator colors based off the dark/light mode preferences

react-native

react-hooks

stack-navigator