昨天新開始了一個react-native的項目,使用了react-navigation, 久了沒用react-navigation,還是踩了坑,記錄下:
react-navigation導(dǎo)入的頁面一直顯示空白,檢查了很久,沒發(fā)現(xiàn)什么不對, 后面懷疑是不是上層的組件有問題, 果不其然, 將上層UI flex設(shè)為1 就顯示出內(nèi)容了.
但是如果不渲染<AppNavigator/>,而改成<Text>hello world</Text>, 不加flex=1也是沒有問題的, 這個就有點坑爹了, 當(dāng)時正是因為先用<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,  這個就是我折騰了兩個小時的現(xiàn)象
             <View>
                <AppNavigator/>
            </View>
            )
   }
}