IOS 上的 React Native Paper Dark Theme答案

【问题标题】：React Native Paper Dark Theme on IOSIOS 上的 React Native Paper Dark Theme
【发布时间】：2021-05-21 23:44:54
【问题描述】：

我想在我的应用程序上使用 react-native-paper 深色主题，但是，我所有的 <View> 仍然有白色背景，并且由于文本在深色模式下变为白色，导致所有 Text 组件不可读。我没有使用自定义主题，因为文档提到：

如果您不使用自定义主题，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;

结果如下： The view still white and the Title also white due to dark mode

It working fine on android

文字变白是因为是深色模式的行为，但是为什么我的<View>还是白色的呢？这仅在 iOS 上发生，在 android 上运行良好。

这是一个新的 react native 项目，根据 react-native-paper 中的文档，它会自动变成深色主题。所以，如果我在 iOS 上设置这个项目时遗漏了一些东西，我需要帮助。任何帮助将不胜感激。

反应：16.13.1
反应原生：0.63.4
react-native-paper: ^4.7.1
react-native-vector-icons: ^8.0.0

【问题讨论】：

标签： ios react-native ios-darkmode react-native-paper

【解决方案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 上下文。可以使用 withTheme HOC 或 useTheme 钩子在组件内访问主题。

【讨论】：