反应本机导航不呈现initialRoute - 空白屏幕

Question

我是新来的导航器，所以也许有一些小我失踪我希望有人能指出。

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

这里的导航之前我的应用程序：

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> 
 
    \t \t \t \t </View > 
 
      } { 
 
      !eligibilityLoading && 
 
       < ReasonSelect/> 
 
      } < /View> 
 
    ); 
 
    } 
 
}

这是我加入导航（我看到这个控制台登录工作）之后添加：

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 ( 
 
\t \t \t <View> 
 
\t \t \t \t {eligibilityLoading && 
 
    \t \t \t \t <View style={{marginTop: 30, paddingLeft: 15}}> 
 
    \t \t \t \t <Text>Loading...</Text > 
 
     < /View>} 
 
\t \t \t \t {!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