用导航器反应本机显示黑屏

Question

我有一个带有几个导航器的react本机项目。当我运行它时，它将显示一个空白屏幕，并且没有错误。请引导我。

/** index.js */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);


/*  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',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});



/*  AppNavigator.js  */
import React from 'react';
import { createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

export default createSwitchNavigator({
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  Main: MainTabNavigator,
});



/* MainTabNavigator.js */
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator,createTabNavigator, createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';


//import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation'

// StackNavigator screens
import ItemList from '../screens/ItemList'
import Item from '../screens/Item'

// TabNavigator screens
import TabA from '../screens/TabA'
import TabB from '../screens/TabB'
import TabC from '../screens/TabC'

// Plain old component
import Plain from '../screens/Plain'

const Stack = createStackNavigator({
  ItemList: { screen: ItemList },
  Item: { screen: Item },
}, {
  initialRouteName: 'ItemList',
})

const Tabs = createBottomTabNavigator({
  TabA: { screen: TabA },
  TabB: { screen: TabB },
  TabC: { screen: Stack },
}, {
  order: ['TabA', 'TabB', 'TabC']
});

const TabStack = createStackNavigator({ //... Adding the Stack here
  Tabs: {screen: Tabs}
}, {
  headerMode: 'none'
})


export default createDrawerNavigator({
  Stack: { screen: Stack },
  Tabs: { screen: TabStack },
  Plain: { screen: Plain },
})



{
  "name": "tepl5",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "native-base": "^2.8.2",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-navigation": "2.18.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.0",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}