React Hooks：根据暗/亮模式偏好动态更新 stackNavigator 颜色答案

【问题标题】：React Hooks: Dynamically update stackNavigator colors based off the dark/light mode preferencesReact Hooks：根据暗/亮模式偏好动态更新 stackNavigator 颜色
【发布时间】：2020-02-01 14:16:32
【问题描述】：

我正在使用 React Hooks 在我的应用程序中实现 dark/light 模式，但我不确定如何为我的 StackNavigator 制作组件或将 props 传递到堆栈导航器。如何将 colors 从我的主题传递到我的 StackNavigator？请你帮帮我:)

App.js

 <AppearanceProvider>
     <SwitchNavigator />
 </AppearanceProvider>

主题/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,
  }
};

主题/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,
  }
}

这是我如何使用颜色的示例： 组件/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);

【问题讨论】：

标签： react-native react-hooks stack-navigator

【解决方案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;

【讨论】：