Question

前进，对不起，如果我的英语不是最好的话。

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

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

当我添加路由器时，样式的工作方式类似于backgroundColor。从那以后，应用程序的背景只有白色，无论我不能使用哪个组件。使用视图时确实代表边框。

我可能错过了什么吗？

我已经在每个点上测试了View元素。结果相同。就像我说的那样，在我使用React Router之前，它已经起作用了。通过React Native Paper和Redux的集成，没有问题。我还尝试自定义styles.xml。尽管这确实可以永久更改背景颜色，但是这就是为什么我仍然不能在任何组件中添加边框的原因。我还尝试了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>
        )
    }
}

没有一个有效。感谢您的帮助。

Answer 1

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

React Native：当我使用react-router / react-router-navigation

1 个答案: