使用 Expo 和 Stack Navigation 的 react-native-paper 主题问题答案

【问题标题】：Problem with react-native-papere Theme using Expo and Stack Navigation使用 Expo 和 Stack Navigation 的 react-native-paper 主题问题
【发布时间】：2021-08-28 20:31:19
【问题描述】：

我正在与 Expo 合作创建一个具有原生反应的移动应用程序，我正在尝试使用 react-native-paper 包含样式并将自定义主题应用于整个项目，但它不会应用来自 DefaultTheme 的任何更改， DarkTheme，或自定义主题。

唯一改变的值是“主要”颜色，即我截图中 InputText 中的下划线。

Getting Started Documentation

Theming Documentation

登录屏幕

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

const LoginScreen = () => {
  const [text, setText] = React.useState('')
  return (
    <View 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: '#fcd580', fontWeight: 'bold', marginTop: 50}}>Correo electrónico</Text>
        <TextInput
          style = {{backgroundColor: null}}
          value = {text}
          placeholder = 'ejemplo@email.com'
          //placeholderTextColor = 'white'
          selectionColor = '#fcd580'
          outlineColor = '#fcd580'
          underlineColor = 'white'
        />
        <Text style = {{color: '#fcd580', fontWeight: 'bold', marginTop: 20}}>Contraseña</Text>
        <TextInput
          style = {{backgroundColor: null}}
          value = {text}
          placeholder = 'Contraseña?'
          //placeholderTextColor = 'white'
          underlineColor = 'white'
          selectionColor = '#fcd580'
          outlineColor = 'white'
          secureTextEntry
        />
      </View>
    </View>
  )
}

export default LoginScreen

堆栈导航

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import LoginScreen from '../screens/LoginScreen'

const LoginRegisterStack = () => {
  return (
    <Stack.Navigator >
      <Stack.Screen name = 'Login' component = {LoginScreen} 
        options ={{headerShown: false}}
      />
      <Stack.Screen name = 'Register' component = {RegisterScreen}/>
    </Stack.Navigator>
  )
}

export { LoginRegisterStack }

App.js

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { LoginRegisterStack } from './routes/MyRoutes'
import store from './store/store';
import { Provider } from 'react-redux';
import { Provider as PaperProvider } from 'react-native-paper';
import MainTheme from './theme/MainTheme';

export default function App(){
  return(
    <Provider store={store}>
      <PaperProvider theme ={MainTheme}>
        <NavigationContainer>
          <LoginRegisterStack/>
        </NavigationContainer>
      </PaperProvider>
    </Provider>
  );
}

自定义主题（使用随机颜色进行测试）

import { DefaultTheme } from 'react-native-paper'
import { black, pink50 } from 'react-native-paper/src/styles/colors'
import type { Theme } from 'react-native-paper/src/types'

const MainTheme: Theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#fcd580',
    background: black,
    text: pink50,
  },
};

export default MainTheme

【问题讨论】：

标签： android react-native expo themes react-native-paper

【解决方案1】：

实际上 react-native-paper 主题仅应用于 react-native-paper 元素。因此，要更改文本颜色，只需从 react-native-paper 而不是 react-native 导入文本。此外，只有 react-native 元素的 backgroundColor 才会改变。因此，如果您想更改主屏幕的背景颜色，请使用 react-navigation 主题（如果使用 react-navigation）。

【讨论】：