iOS 上的 React Native Paper 深色主题

Question

我想在我的应用程序上使用react-native-paper深色主题，但是，我所有的

<View>

仍然有白色背景，导致所有文本组件不可读，因为文本在深色模式下变成白色。我没有使用自定义主题，因为文档提到了这一点：

如果您不使用自定义主题，Paper 将根据设备设置自动打开/关闭动画。

这是我在 App.js 中的代码：

import React from 'react';
import {Provider as PaperProvider} from 'react-native-paper';
import Home from './src/Home';

const App = () => {
  return (
    <PaperProvider>
      <Home />
    </PaperProvider>
  );
};

export default App;

这是在我的 Home.js 中：

import React from 'react';
import {View} from 'react-native';
import {Appbar, Card, Title} from 'react-native-paper';

const Home = () => {
  return (
    <View style={{flex: 1}}>
      <Appbar.Header>
        <Appbar.BackAction onPress={() => console.log('back')} />
        <Appbar.Content title="Title" subtitle={'Subtitle'} />
      </Appbar.Header>
      <View>
        <Title>Hello World</Title>
        <Card
          style={{margin: 15, padding: 15}}
          onPress={() => console.log('press card')}>
          <Title>This is Card</Title>
        </Card>
      </View>
    </View>
  );
};

export default Home;

这就是结果：

文字变白是因为这是深色模式的行为，但为什么我的

<View>

仍然是白色的？这仅发生在 iOS 上，在 Android 上运行良好。

这是一个新的 React Native 项目，基于 React-Native-Paper 中的文档，它将自动切换深色主题。因此，如果我在 iOS 上设置此项目时遗漏了某些内容，我需要帮助。任何帮助将不胜感激。

• 反应：16.13.1
• 反应原生：0.63.4
• react-native-paper：^4.7.1
• 反应本机矢量图标：^8.0.0

Answer 1

如果您没有指定自定义主题，Paper 将使用 DefaultTheme，它本质上是一个浅色主题。为了在您的应用程序中使用深色主题，Paper 提供了基于 Material 的 DarkTheme。您可以指定在 Paper 提供程序中使用哪个主题。

来自 DefaultTheme 文档的完整示例，包括自定义：

import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    accent: '#f1c40f',
  },
};

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

PaperProvider 使用 React Context。可以使用 withTheme HOC 或 useTheme 挂钩在组件内访问主题。

Answer 2

我也遇到同样的问题，请问你是怎么修复的？