Expo搭配Stack Navigation时react-native-paper自定义主题不生效问题

问题原因 #

你遇到的主题不生效是以下几个原因共同导致的：

• 你代码中使用的<View>、<Text>都是React Native原生组件，只有react-native-paper官方提供的组件才会自动消费PaperProvider注入的主题配置
• 你给<TextInput>手动硬编码了underlineColor、selectionColor、outlineColor等属性，这些属性的优先级高于主题配置，会直接覆盖主题的对应设置
• 主题中配置的background颜色需要用react-native-paper的<Surface>组件作为根容器才会自动应用，原生<View>不会自动读取主题的背景色配置

修复步骤 #

1. 替换登录页组件，删除硬编码属性 #

修改登录页代码如下：

import React from 'react'
import { StatusBar } from 'react-native'
import { TextInput, Text, Surface, useTheme } from 'react-native-paper'

const LoginScreen = () => {
  const [text, setText] = React.useState('')
  const theme = useTheme() // 可直接获取当前主题配置做自定义样式使用
  return (
    <Surface style = {{flex: 1, alignItems:'center'}} >
      <StatusBar barStyle="light" />
      <View style = {{marginTop: '10%', width: '80%'}}>
      <Text style = {{fontWeight: 'bold', fontSize: 30}}>Inicia Sesión</Text>
      <Text>¡Hola! Es un gusto verte de nuevo.</Text>
        <Text style = {{color: theme.colors.primary, fontWeight: 'bold', marginTop: 50}}>Correo electrónico</Text>
        <TextInput
          style = {{backgroundColor: 'transparent'}}
          value = {text}
          placeholder = 'ejemplo@email.com'
        />
        <Text style = {{color: theme.colors.primary, fontWeight: 'bold', marginTop: 20}}>Contraseña</Text>
        <TextInput
          style = {{backgroundColor: 'transparent'}}
          value = {text}
          placeholder = 'Contraseña?'
          secureTextEntry
        />
      </View>
    </Surface>
  )
}

export default LoginScreen

2. 可选适配react-native-paper v5版本 #

如果你使用的是v5及以上版本的react-native-paper，主题结构有调整，需要按对应版本的结构配置主题，示例如下：

import { MD3LightTheme } from 'react-native-paper';

const MainTheme = {
  ...MD3LightTheme,
  colors: {
    ...MD3LightTheme.colors,
    primary: '#fcd580',
    background: 'black',
    onBackground: 'pink', // v5版本文本对应onBackground属性
  },
};

内容的提问来源于stack exchange，提问作者Lando Sotelo