React Hooks: динамически обновлять цвета stackNavigator, основываясь на предпочтениях темного / светлого режима - PullRequest
Новая
       9

React Hooks: динамически обновлять цвета stackNavigator, основываясь на предпочтениях темного / светлого режима

0 голосов
/ 01 февраля 2020

Я внедряю темный / светлый режим в мое приложение, используя React Hooks , и я не уверен, как создать компонент для моего StackNavigator или передать реквизиты в StackNavigator. Как передать цвета из моей темы в мой StackNavigator ? Пожалуйста, не могли бы вы помочь мне :)

Приложение. js

 <AppearanceProvider>
     <SwitchNavigator />
 </AppearanceProvider>

Тема / Указатель. 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);

1 Ответ

0 голосов
/ 08 февраля 2020

Итак, стабильная версия 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;
...