react-native使用 react-navigation

昨天新开始了一个react-native的项目,使用了react-navigation, 久了没用react-navigation,还是踩了坑,记录下:
react-navigation导入的页面一直显示空白,检查了很久,没发现什么不对, 后面怀疑是不是上层的组件有问题, 果不其然, 将上层UI flex设为1 就显示出内容了.
但是如果不渲染<AppNavigator/>,而改成<Text>hello world</Text>, 不加flex=1也是没有问题的, 这个就有点坑爹了, 当时正是因为先用<Text>hello world</Text>渲染了一下, 所以判定这里是没有问题的. 而换成AppNavigator 之后就打死都不行了. 详见App.js代码

index.js

//index.js
/**
 * @format
 */

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

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

./src/App.js

./src/App.js
import React from 'react'
import {View,Text} from 'react-native'

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


class Home extends React.Component{
    render(): boolean | number | string | React$Element<*> | React$Portal | Iterable | null {
        return (
            <View>
                <Text>this is homepage</Text>
            </View>
        )
    }
}

const Navigator = createStackNavigator({
    Home:{
        screen:Home,
    }
},
    {
        initialRouteName: 'Home'
    })

const AppNavigator = createAppContainer(Navigator)


export default class App extends React.Component{
    render():{
        return ( //可以正常显示
           <View style={{flex:1}}>
                <AppNavigator/>
            </View>
        )
       return ( //也可以正常显示
             <View>
               <Text>Hello world</Text>
            </View>
            )
         return ( //显示空白, 不能显示出this is homepage,  这个就是我折腾了两个小时的现象
             <View>
                <AppNavigator/>
            </View>
            )
   }
}