React Native: стиль представления не работает, когда я использую реагирование-маршрутизатор / реагирование-маршрутизатор-навигация - PullRequest
Новая
       6

React Native: стиль представления не работает, когда я использую реагирование-маршрутизатор / реагирование-маршрутизатор-навигация

0 голосов
/ 17 января 2019

Заранее, извините, если мой английский не самый лучший.

Я давно не работал над React Native, и теперь мне нужно реализовать приложение с ним. Я сейчас использую:

  • Android Studio 3.3
  • Android 9.0 Api 28
  • React Native 0.57.8
  • React Router 4.3.1
  • React Router Native 4.3.0
  • React Router Navigation 2.0.0-alpha.10

К тому времени, когда я добавил маршрутизатор, стили работали как backgroundColor. С тех пор фон приложения только белый, и неважно, какой компонент я не могу, например. действительно представляю границу, когда я использую представление.

Возможно, я что-то пропустил?

Я уже проверял элемент View в каждой точке. Тот же результат. Как я уже говорил, до того, как я использовал React Router, он работал. С интеграцией React Native Paper и Redux проблем не было. Я также попытался настроить styles.xml. Хотя это работает для постоянного изменения цвета фона, поэтому я все еще не могу поместить Border в любой компонент. Я также попытался «компонент» вместо «рендеринга» в компоненте карты. А также с собственным компонентом макета.

App.js 

import React from 'react'
import { StyleSheet, View } from 'react-native'

import { Provider as StoreProvider } from 'react-redux'
import { createStore } from 'redux'
import reducers from './reducers'

import { NativeRouter } from 'react-router-native'
import { Navigation, Card } from 'react-router-navigation'

import { Provider as PaperProvider } from 'react-native-paper'
import theme from './assets/js/theme'

import { Login } from './components/Views'

const appStyles = StyleSheet.create({
    root: {
        backgroundColor: theme.colors.background
    }
})

export default App = () => {

    return (
        <View styles={ appStyles.root }>
            <StoreProvider store={createStore(reducers)}>
                <PaperProvider theme={theme}>
                    <NativeRouter>
                        <Navigation hideNavBar>
                            <Card
                                exact
                                path="/"
                                render={() => <Login/>}
                            />
                        </Navigation>
                    </NativeRouter>
                </PaperProvider>
            </StoreProvider>
        </View>
    )
}

часть Login.js 

const loginStyles = StyleSheet.create({
    login: {
        width: 400,
        height: 400,
        borderWidth: 4,
        borderColor: theme.colors.error,
        borderRadius: 3,
        padding: 20,
        justifyContent: 'center'
    }
})

class Login extends Component {

    render() {

        console.log('LOGIN')
        return (
            <View styles={loginStyles.login}>
                <Text style={{ color: theme.colors.error, alignSelf: 'center' }}>Test</Text>
            </View>
        )
    }
}

Ничего из этого не сработало. Спасибо за помощь.

1 Ответ

0 голосов
/ 25 января 2019

Я решил это сам. Я сейчас использую React Native Router Flux. Я все еще учусь и пробую.

...