暗模式不起作用 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