如何更改本地iOS模拟器DarkMode？

Question

我写了代码，并在iOS模拟器中做了shift +命令+a，但是我可以看到console.log没有改变模式，有什么问题吗？

​

import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import { useColorScheme } from "react-native-web";
import Movies from "../screens/Movies";
import Search from "../screens/Search";
import Tv from "../screens/Tv";

const Tab = createBottomTabNavigator();

const Tabs = () => {
    const colorScheme = useColorScheme();
    console.log(colorScheme);
    
    return(
        <Tab.Navigator >
            <Tab.Screen name="Movies" component={Movies} options={{
            }}/>
            <Tab.Screen name="Tv" component={Tv}/>
            <Tab.Screen name="Search" component={Search}/>
        </Tab.Navigator>
    );
}
export default Tabs;

​

Answer 1

第一：

import * as RN from "react-native";
import {
  DarkTheme,
  DefaultTheme,
  NavigationContainer,
} from "@react-navigation/native";

在App.js中：

let cs = RN.useColorScheme();
let isDark = cs === "dark";
let theme = isDark ? DarkTheme : DefaultTheme; // or your custom theme [1]
...

...
<NavigationContainer theme={theme}>
 <Tabs />
</NavigationContainer>
...

1：反应导航主题

如果您想在功能组件中使用react导航主题对象：

import { useTheme } from "@react-navigation/native";

在定义了功能组件之后：

let { colors, dark } = useTheme();

在联合来文中：

...
<View
 style={{
 width: 100,
 height: 175,
 margin: 10,
 alignItems: "center",
 borderWidth: 1,
 backgroundColor: colors.primary,
 borderRadius: 10,
 justifyContent: "space-evenly",
 }}
/>
...

Answer 2

当使用Chrome进行调试时，getColorScheme()钩子总是会返回光。禁用调试以返回dark。

要调试的示例

const colorScheme = useColorScheme();

  useEffect(() => {
    if (colorScheme) {
      Alert.alert(colorScheme)
    }
  }, [colorScheme])