为 Next.js 和 Expo 项目添加深色模式支持
👋 今天来个快速教程！我会教你如何设置通用 Web 和移动应用，使其使用客户端设备的原生配色方案！你也可以用同样的方法设置其他强大的功能，比如React Native 安全区域上下文和Expo 操作表！💙
教程
- 首先将您的Expo 或 Next.js 应用程序设置为通用应用程序。
- 安装通用的 Expo 包react-native-appearance：。
yarn add react-native-appearance - [Web] 通过创建以下代码，将 Appearance React Context 提供程序添加到 Next.js 应用的根目录：
pages/_app.js
import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';
export default ({ Component, pageProps }) => {
return (
<AppearanceProvider>
<Component {...pageProps} />
</AppearanceProvider>
)
}
- [移动端] 将外观提供程序添加到 Expo 应用的根目录中
./App.js：
import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';
export default function App() {
return (
<AppearanceProvider>
{/* ... */}
</AppearanceProvider>
)
}
- 现在你可以
useColorScheme在 Expo + Next.js 应用中的任何位置使用该钩子了！
import { useColorScheme } from 'react-native-appearance';
function App() {
const colorScheme = useColorScheme();
const isDark = colorScheme === 'dark';
return (<Text style={{ color: isDark ? 'white' : 'black' }}>Hey 👋</Text>)
}
就是这样！我的个人作品集（演示图片）也采用了同样的方法：
React导航
如果你的 Expo 应用使用的是 React Navigation (v4)，那么你需要像这样包裹导航：
import * as React from 'react';
import { AppearanceProvider } from 'react-native-appearance';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
// Can be any navigator
const AppNavigator = createStackNavigator(/* Your routes */)
function ContextNavigator(props) {
return (
<AppearanceProvider>
<AppNavigator {...props} />
</AppearanceProvider>
);
}
// Hoist the routes
ContextNavigator.router = AppNavigator.router;
// Export the full navigator
export default createAppContainer(ContextNavigator);
感谢阅读！
如果您发现任何问题，请告诉我！如果您觉得这篇文章有用，请务必分享（可以打印出来，在城里到处分发😄），当然，别忘了点击那个随机独角兽按钮！🦄
文章来源：https://dev.to/evanbacon/adding-dark-mode-support-to-next-js-and-expo-projects-517a