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

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

问题是 App.js 中 View 的 class。

请注意，如果您为 app.js 添加 backgroundColor，那么您的 app.js 将不会显示您的导航器。

事实上，您的容器覆盖了您的AppNavigator。

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

Blank white screen using react navigation in IOS

react-native-ios

react-navigation