React Native：当我使用 react-router / react-router-navigation 时，视图上的任何样式都不起作用

Question

提前，如果我的英语不是最好的，抱歉。

我已经很长时间没有使用 React Native 了，现在我必须用它来实现一个应用程序。我目前使用：

Android Studio 3.3
Android 9.0 Api 28
React Native 0.57.8
反应路由器 4.3.1
React Router Native 4.3.0
React 路由器导航 2.0.0-alpha.10

当我添加路由器时，样式就像 backgroundColor 一样工作。从那时起，应用程序的背景就只有白色，无论哪个组件我都不能，例如当我使用视图时确实代表边框。

我是不是漏掉了什么？

我已经在每个点测试了 View 元素。同样的结果。正如我所说，在我使用 React Router 之前，它是有效的。有了 React Native Paper 和 Redux 的集成，就没有问题了。我还尝试自定义 styles.xml。虽然这确实适用于永久更改背景颜色，但这就是为什么我仍然不能将 Border 放在任何组件中的原因。我还在 Card 组件中尝试 "component" 而不是 "render" 。并且还有自己的布局组件。

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

None 有效。感谢您的帮助。

Answer 1

我自己解决了。我现在正在使用 React Native Router Flux。我还在学习和尝试。

React Native：当我使用 react-router / react-router-navigation 时，视图上的任何样式都不起作用

React Native: no style on views works when I use react-router / react-router-navigation

react-router

react-native

react-router-navigation

react-router-native