2

我在 React Native 中练习和新手，我真的很喜欢 React 导航。

我一直在玩反应导航并进行自定义设置，就像ErrorBoundary它工作正常一样。

我创建了一个组件并将其命名为设置，用户可以从该设置组件将按钮切换到暗模式。

我没有在文档中找到如何改变应用程序的阴暗情绪。任何人都可以帮助我，如何从子组件中改变黑暗的情绪？

这是我的路由器组件。我在哪里导航组件。

import { Ionicons } from "@expo/vector-icons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { useNavigation } from "@react-navigation/native";
import React, { useContext } from "react";
import { Button, Text, View } from "react-native";
import { ThemeContext } from "styled-components";
import ErrorBoundary from "../components/errorBoundaries";
import ITheme from "../themes/types";
import IssuesRouter from "./issues/components/router";
import Settings from "./settings/Settings";
import StyleGuide from "./styleGuide";
import Itinerary from "./tasks/views/itinerary";

const tabIcon = ({ focused, color, size, route }: any) => {
  let iconName;
  if (route.name === `Tasks`) {
    iconName = focused
      ? `ios-checkmark-circle`
      : `ios-checkmark-circle-outline`;
  } else if (route.name === `Issues`) {
    iconName = focused ? `ios-warning` : `ios-warning`;
  } else if (route.name === `History`) {
    iconName = focused ? `ios-list-box` : `ios-list`;
  } else if (route.name === `Settings`) {
    iconName = focused ? `ios-settings` : `ios-settings`;
  }
  return <Ionicons name={iconName} size={size} color={color} />;
};

const ApplicationRouter = () => {
  const Tab = createBottomTabNavigator();
  const theme: ITheme = useContext(ThemeContext);

  const HomeScreen = () => { 
    const { navigate } = useNavigation();
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: `pink`,
          justifyContent: `center`,
          alignItems: `center`
        }}
      >
        <Text>Home!</Text>
        <Button onPress={() => navigate(`Tasks`)} title="Open Modal" />
      </View>
    );
  };

  return (
    <ErrorBoundary id="ApplicationRouter">
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: i =>
            tabIcon({
              ...i,
              route
            })
        })}
        tabBarOptions={{
          activeTintColor: theme.linkColor,
          inactiveTintColor: theme.linkColorInactive,
          style: {
            paddingTop: 10,
            borderTopWidth: 0,
            backgroundColor: theme.backgroundColorAlt2
          }
        }}
        lazy={false}
      >
        <Tab.Screen name="Tasks" component={Itinerary} />
        <Tab.Screen name="Issues" component={IssuesRouter} />
        <Tab.Screen name="History" component={HomeScreen} />
        <Tab.Screen name="Settings" component={Settings} /> //THIS IS MY SETTING COMPONENT WHERE I WANT CHANGE MY DARK MOOD 
        <Tab.Screen name="Style guide" component={StyleGuide} />
      </Tab.Navigator>
    </ErrorBoundary>
  );
};

export default ApplicationRouter;

这是我的设置组件

import React, { useState } from "react";
import { StyleSheet, Switch, View } from "react-native";

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});
4

1 回答 1

0

我看到这是一个老问题，但我想回答以防有人浏览这个问题。

在当前版本的 react-native-navigation (6*.0) 中，使用少量样板代码设置整个 App 的主题管理器非常简单

笔记！！！：

必须安装此 pacakges 才能使其正常工作（React-navigation 的所有部分）：

npm install @react-navigation/native
# 2 Main dependencie
npm install react-native-screens react-native-safe-area-context
# 3 Addittional Package (Stack)
npm install @react-navigation/native-stack react-native-gesture-handler

# 4 Additional Dependency:
npm install @react-navigation/stack react-native-gesture-handler

具有最小代码的完整工作代码

import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import {NavigationContainer,DefaultTheme, DarkTheme,useTheme,} from '@react-navigation/native';  // IMPORT THEMES HERE!!! 
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function SettingsScreen({ route, navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Settings Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

function HomeScreen({ navigation }) {
  const { colors } = useTheme();  // USE THIS In order to get the Current Themes used
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
        <TouchableOpacity style={{ backgroundColor: colors.card }}>
          <Text style={{ color: colors.text }}>Button!</Text>
        </TouchableOpacity>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

export default function App() {
  return (
      <NavigationContainer theme={ DarkTheme  }> // HERE THE KEY PART, Just add the Theme and the Whole App uses it (a part of text)  
        <Stack.Navigator  initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Settings" component={SettingsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

解释

  1. 导入这个

    从“@react-navigation/native”导入 {NavigationContainer,DefaultTheme,DarkTheme,useTheme,}；// 在这里导入主题！！！

  2. 在 NavigationContainer 上添加道具theme

     <NavigationContainer theme={ DarkTheme  }>

请注意，主题必须遵循以下 Javasrict 对象结构：

const MyTheme = {
  dark: false,
  colors: {
    primary: 'rgb(255, 45, 85)',
    background: 'rgb(242, 242, 242)',
    card: 'rgb(255, 255, 255)',
    text: 'rgb(28, 28, 30)',
    border: 'rgb(199, 199, 204)',
    notification: 'rgb(255, 69, 58)',
  },
};

  1. 使用功能访问当前选定的主题useTheme。例如，文本不会更新，您需要手动设置

    const { colors } = useTheme();  // USE THIS In order to get the Current

    // 像这样使用
    <Text style={{ color: colors.text }}>Button！

**顺便说一下，DefaultThem DarkTheme对象是这样的：

// DEFAULT LIGHT THEME
const DefaultTheme = {
    dark: false,
    colors: {
        primary: 'rgb(0, 122, 255)',
        background: 'rgb(242, 242, 242)',
        card: 'rgb(255, 255, 255)',
        text: 'rgb(28, 28, 30)',
        border: 'rgb(216, 216, 216)',
        notification: 'rgb(255, 59, 48)',
    },
};

// DEFAULT DARK THEME
const DarkTheme = {
    dark: true,
    colors: {
        primary: 'rgb(10, 132, 255)',
        background: 'rgb(1, 1, 1)',
        card: 'rgb(18, 18, 18)',
        text: 'rgb(229, 229, 231)',
        border: 'rgb(39, 39, 41)',
        notification: 'rgb(255, 69, 58)',
    },
};

文档

于 2021-08-06T05:32:00.470 回答