我正在练习，并且是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"
}
});
答案 0 :(得分：0)
我看到的是一个老问题，不过我想回答一下，以防有人浏览这个问题。
在当前版本的 react-native-navigation (6*.0) 中设置主题管理器非常简单，只需很少的样板代码
注意！！！：
必须安装此包才能使其正常工作（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>
);
}
导入这个
从'@react-navigation/native'导入{NavigationContainer,DefaultTheme,DarkTheme,useTheme,}； // 在这里导入主题！！！
在 NavigationContainer 上添加 prop 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)',
},
};
使用 useTheme 函数访问当前选定的主题。例如文本不会更新，您需要手动设置
const { colors } = useTheme(); // USE THIS In order to get the Current
// 像这样使用
**顺便说一下，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)',
},
};