Блог

Я работаю с Expo над созданием мобильного приложения с react native, я пытаюсь включить стили react-native-paper и применить пользовательскую тему ко всему проекту, но она не применяет никаких изменений из DefaultTheme, DarkTheme или пользовательской темы.

Единственное значение, которое меняется, — это «основной» цвет, подчеркивание во входном тексте на моем скриншоте.

Документация для начала работы

Тематическая документация

Экран Входа в систему

 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
 

Stack Navigation

 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>
  );
}
 

Custom Theme (using random colors to test)

 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