了解如何在你的应用中支持浅色和夜间模式。
应用支持浅色和深色配色方案很常见。以下是 Expo 项目中支持两种模式的示例:
¥It's common for apps to support light and dark color schemes. Here is an example of how supporting both modes looks in an Expo project:
¥Configuration
对于 Android 和 iOS 项目,需要进行其他配置才能支持在明夜间模式之间切换。对于 Web,无需额外配置。
要配置支持的外观样式,你可以在项目的 应用配置 中使用 userInterfaceStyle
属性。默认情况下,当你使用 默认模板 创建新项目时,此属性默认设置为 automatic
。
¥To configure supported appearance styles, you can use the userInterfaceStyle
property in your project's app config. By default, this property is set to automatic
when you create a new project with the default template.
这是一个配置示例:
¥Here is an example configuration:
{
"expo": {
"userInterfaceStyle": "automatic"
}
}
你还可以通过将 android.userInterfaceStyle
或 ios.userInterfaceStyle
设置为首选值来为特定平台配置 userInterfaceStyle
属性。
¥You can also configure userInterfaceStyle
property for a specific platforms by setting either android.userInterfaceStyle
or ios.userInterfaceStyle
to the preferred value.
如果此属性不存在,应用将默认为light
样式。
创建开发版本时,你必须安装 expo-system-ui
以支持 Android 的外观样式。否则,userInterfaceStyle
属性将被忽略。
¥When you are creating a development build, you have to install expo-system-ui
to support the appearance styles for Android. Otherwise, the userInterfaceStyle
property is ignored.
-
npx expo install expo-system-ui
如果项目配置错误且未安装 expo-system-ui
,则终端中将显示以下警告:
¥If the project is misconfigured and doesn't have expo-system-ui
installed, the following warning will be shown in the terminal:
» android: userInterfaceStyle: Install expo-system-ui in your project to enable this feature.
还可以使用以下命令检查项目是否配置错误:
¥You can also use the following command to check if the project is misconfigured:
-
npx expo config --type introspect
¥Android
确保 AndroidManifest.xml 中的 MainActivity
(以及需要此行为的任何其他活动)上存在 uiMode
标志:
¥Ensure that the uiMode
flag is present on your MainActivity
(and any other activities where this behavior is desired) in AndroidManifest.xml:
<activity android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">
在 MainActivity.java 中实现 onConfigurationChanged
方法:
¥Implement the onConfigurationChanged
method in MainActivity.java:
import android.content.Intent;
import android.content.res.Configuration;
public class MainActivity extends ReactActivity {
%%placeholder-start%%... %%placeholder-end%%
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Intent intent = new Intent("onConfigurationChanged");
intent.putExtra("newConfig", newConfig);
sendBroadcast(intent);
}
%%placeholder-start%%... %%placeholder-end%%
}
¥iOS
你可以使用应用 Info.plist 中的 UIUserInterfaceStyle
键配置支持的样式。使用 Automatic
同时支持浅色和夜间模式。
¥You can configure supported styles with the UIUserInterfaceStyle
key in your app Info.plist. Use Automatic
to support both light and dark modes.
¥Supported appearance styles
userInterfaceStyle
属性支持以下值:
¥The userInterfaceStyle
property supports the following values:
automatic
:遵循系统外观设置并通知用户所做的任何更改。
¥automatic
: Follow system appearance settings and notify about any change the user makes.
light
:限制应用仅支持浅色主题。
¥light
: Restrict the app to support light theme only.
dark
:限制应用仅支持深色主题。
¥dark
: Restrict the app to support dark theme only.
¥Detect the color scheme
要检测项目中的配色方案,请使用 react-native
中的 Appearance
或 useColorScheme
:
¥To detect the color scheme in your project, use Appearance
or useColorScheme
from react-native
:
import { Appearance, useColorScheme } from 'react-native';
然后,你可以使用 useColorScheme()
钩子,如下所示:
¥Then, you can use useColorScheme()
hook as shown below:
function MyComponent() {
let colorScheme = useColorScheme();
if (colorScheme === 'dark') {
// render some dark thing
} else {
// render some light thing
}
}
在某些情况下,你会发现使用 Appearance.getColorScheme()
or listen to changes with Appearance.addChangeListener()
强制获取当前配色方案很有帮助。
¥In some cases, you will find it helpful to get the current color scheme imperatively with Appearance.getColorScheme()
or listen to changes with Appearance.addChangeListener()
.
¥Additional information
¥Minimal example
import { Text, StyleSheet, View, useColorScheme } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export default function App() {
const colorScheme = useColorScheme();
const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
const themeContainerStyle =
colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
return (
<View style={[styles.container, themeContainerStyle]}>
<Text style={[styles.text, themeTextStyle]}>Color scheme: {colorScheme}</Text>
<StatusBar />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 20,
},
lightContainer: {
backgroundColor: '#d0d0c0',
},
darkContainer: {
backgroundColor: '#242c40',
},
lightThemeText: {
color: '#242c40',
},
darkThemeText: {
color: '#d0d0c0',
},
});
¥Tips
在开发项目时,你可以使用以下快捷方式更改模拟器或设备的外观:
¥While you are developing your project, you can change your simulator's or device's appearance by using the following shortcuts:
如果使用 Android 模拟器,你可以运行 adb shell "cmd uimode night yes"
来启用夜间模式,运行 adb shell "cmd uimode night no"
来禁用夜间模式。
¥If using an Android Emulator, you can run adb shell "cmd uimode night yes"
to enable dark mode, and adb shell "cmd uimode night no"
to disable dark mode.
如果使用物理 Android 设备或 Android 模拟器,你可以在设备的设置中切换系统夜间模式设置。
¥If using a physical Android device or an Android Emulator, you can toggle the system dark mode setting in the device's settings.
如果在本地使用 iOS 模拟器,你可以使用 Cmd ⌘ + Shift + a 快捷键在浅色和夜间模式之间切换。
¥If working with an iOS emulator locally, you can use the Cmd ⌘ + Shift + a shortcut to toggle between light and dark modes.