0

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

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

  • 安卓工作室 3.3
  • 安卓 9.0 API 28
  • 反应原生 0.57.8
  • 反应路由器 4.3.1
  • 反应路由器本机 4.3.0
  • 反应路由器导航 2.0.0-alpha.10

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

我可能错过了什么吗？

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

应用程序.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>
        )
    }
}

都没有奏效。感谢帮助。

4

1 回答 1

0

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

于 2019-01-25T10:47:18.900 回答