Question

我想在react native应用中运行一个新项目。我没有收到任何错误，但模拟器中的应用程序只显示空白页。

首先，我写了react-native init AwesomeProject用于创建新项目。

然后，我尝试实现以下反应导航：

import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';

import Home from './MainTabNavigator';
import SignInScreen from './SignInScreen';
import Setting from './SettingScreen';
import Articles from './ArticleScreen';
import SignUp from './SignUpScreen';
import Category from './SelectCategory';

export default createAppContainer(createSwitchNavigator({
        Auth: SignInScreen,
        Main: Home,
        Setting: Setting,
        SignUp: SignUp,
        SelectCategory: Category
    },
    {
      initialRouteName:'Auth',
    }
));

我还如下实现了package.json，然后使用npm install

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "axios": "0.18.0",
    "native-base": "^2.0.6",
    "react": "16.8.3",
    "react-native": "0.59.1",
    "react-native-animatable": "1.3.0",
    "react-native-autoheight-webview": "^1.0.1",
    "react-native-banner-carousel": "1.0.3",
    "react-native-elements": "0.19.1",
    "react-native-form-builder": "^1.0.16",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-html-to-text": "^0.0.5",
    "react-native-image-header-scroll-view": "0.8.2",
    "react-native-keyboard-aware-scroll-view": "^0.8.0",
    "react-native-paper": "2.2.8",
    "react-native-webview": "^5.2.1",
    "react-native-webview-autoheight": "^1.0.6",
    "react-navigation": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "7.4.0",
    "@babel/runtime": "^7.4.2",
    "babel-jest": "24.5.0",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

但是当我运行react-native run-ios时，我得到了白色的空白页。

我的App.js也如下：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import AppNavigator from './navigation/AppNavigator';


type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <AppNavigator/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

如果我在app.js中写了<Text>Hello</Text>，那么我的空白页将在现场显示此页面。在这里您可以看到它： https://ibb.co/3vFS8jV

我该怎么办？

Answer 1

问题是View中App.js的类。

请注意，如果将backgroundColor赋予app.js，则app.js将不会显示导航器。

实际上，您的容器遮盖了AppNavigator。

在IOS中使用React导航的空白屏幕

1 个答案: