Question

我是React Native的初学者，我创建了一个示例应用程序，并尝试添加react-navigation 这是我在App.js中的代码

import React, {Fragment} from 'react';

import {
StyleSheet,
View,
StatusBar,
} from 'react-native';

import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import Container from './ScreenContainer';

const App = () => {
 return (
<View style={styles.container}>
  <StatusBar backgroundColor="#819ca9" barStyle="light-content"   hidden={true}></StatusBar>

</View>
);
};

const styles = StyleSheet.create({
 container:{
 justifyContent: 'center',
backgroundColor:'#819ca9',
flex: 1,
// alignItems:"center"
},
});

export default App;

这是我的ScreenContainer.js

import { createAppContainer, createStackNavigator, StackActions,    NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import login from './pages/login'; //import Login from './pages/login';
const NavigationStack = createStackNavigator({
SignUp: login
});

const Container = createAppContainer(NavigationStack);

export default Container;

当我在App.js中使用此js时，所有内容都变成空白，经过大量研究，我发现如果我评论alignItems:"center"，那么我的屏幕就会出现bt一切都变形了，在互联网上搜索了很多内容却找不到正确的解决方案

这是我的package.json

{
"name": "MobileAPP",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-router-flux": "^4.0.6",
"react-navigation": "^3.11.1"
},
"devDependencies": {
"@babel/core": "7.5.5",
"@babel/runtime": "7.5.5",
"@react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "^6.0.1",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
 }
 }

任何人都可以帮助我如何在不干扰用户界面的情况下使它正常工作。

非常感谢

Answer 1

我看到您已经在App.js中导入了Container，但看不到它在任何地方都在使用。

使用反应导航时黑屏

1 个答案: