React Native Navigator不呈现initialRoute-空白屏幕

Question

我是导航员的新手，所以我可能遗漏了一些小东西，希望有人能指出。

在添加Navigator之前，我的应用程序工作正常。在添加了一个基本实现之后，我只看到一个空白屏幕，调试器中没有错误。

这是我在Navigator之前的应用程序：

import React, {
Component, PropTypes
}
from 'react';
import {
Text, View, Navigator, StyleSheet
}
from 'react-native';
import ReasonSelect from './components/ReasonSelect'
import ShippingDetails from './components/ShippingDetails'
import Confirmation from './components/Confirmation'
export
default class CardReplacement extends Component {
render() {
return ( < View > {
eligibilityLoading &&
< View style = {
{
marginTop: 30,
paddingLeft: 15
}
} >
< Text > Loading... < /Text>
				</View >
} {
!eligibilityLoading &&
< ReasonSelect / >
} < /View>
);
}
}

以下是我在添加Navigator后添加的内容(我确实看到这个控制台日志在工作)：

import React, {
Component, PropTypes
}
from 'react';
import {
Text, View, Navigator, StyleSheet
}
from 'react-native';
import ReasonSelect from './components/ReasonSelect'
import ShippingDetails from './components/ShippingDetails'
import Confirmation from './components/Confirmation'
export
default class CardReplacement extends Component {
renderScene(route, navigator) {
if (route.name == "Replacement") {
console.log('working')
return <ReasonSelect navigator = {
navigator
}
/>
}
if(route.name == "Shipping"){
return <ShippingDetails navigator={navigator} / >
}
if (route.name == "Confirmation") {
return <Confirmation navigator = {
navigator
}
/>
}
}
render() {
return (   
			<View>
				{eligibilityLoading &&
				<View style={{marginTop: 30, paddingLeft: 15}}>
				<Text>Loading...</Text >
< /View>}
				{!eligibilityLoading &&
<Navigator
style={{ flex:1 }} 
initialRoute={{name: "Replacement"}}
renderScene={this.renderScene}
/ >
} < /View>
);
}
}

我试着简化得更多，但如果我把导航器改为：，我仍然看不到任何东西

< Navigator
style = {
{
flex: 1
}
}
initialRoute = {
{
name: "Replacement"
}
}
renderScene = {
(route, navigator) => {
return <ReasonSelect / >
}
}
/>

我错过了什么？

Answer 1

因此，回答我自己的问题：我的条件elegibilityLoading导致了问题。我需要重构这个。但我仍然不确定为什么。我甚至无法在视图中包装"导航器"，否则屏幕将再次变白。我很想知道这方面的技术原因。

render() {
if(eligibilityLoading){
return (
<View style={{marginTop: 30, paddingLeft: 15}}>
<Text>Loading...</Text>
</View>
)
}
return (   
<Navigator
style={{ flex:1 }} 
initialRoute={{name: "Replacement"}}
renderScene={this.renderScene}
/>
);
}
}

Answer 2

这只是解释为什么您的条件会导致问题：

<View>
{eligibilityLoading &&
<View style={{marginTop: 30, paddingLeft: 15}}>
<Text>Loading...</Text >
< /View>}</View> //Pretty sure this will evaluate to <View>true</View> which is why it's showing a blank screen
//same logic applies for the !eligibilityLoading part