暗模式不起作用 React Navigation React Native

Question

我正在努力使用 React Navigation 在 React Native 中实现黑暗模式。但它只改变底部导航栏而不是里面的屏幕。你能帮我吗

零食代码

https://snack.expo.io/@belgin/news-app

Answer 1

您负责在您自己的组件内设置样式。您将背景设置为浅色，将导航主题设置为深色不会神奇地改变您定义的颜色。

要更改主题以适用于您的组件，您需要使用 useTheme 挂钩在您自己的组件中设置颜色，而不是对它们进行硬编码。

import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '@react-navigation/native';

function MyScreen() {
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      {/* screen content */}
    </View>
  );
}

https://reactnavigation.org/docs/themes/#using-the-current-theme-in-your-own-components