React Native Navigator nicht initialRoute - leeren Bildschirm

Question

Ich bin neu im Navigator so vielleicht gibt es etwas kleines Ich vermisse Ich hoffe, dass jemand darauf hinweisen kann.

Meine App funktionierte, bevor Sie Navigator hinzufügten. Nach dem Hinzufügen einer grundlegenden Implementierung sehe ich nur einen leeren Bildschirm und keine Fehler im Debugger.

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

Hier ist mein Add nach Navigator Hinzufügen (ich sehe dies tun Konsolenprotokoll arbeiten):

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> 
 
    ); 
 
    } 
 
}

Ich habe versucht, noch mehr zu vereinfachen, und ich kann immer noch nichts sehen, ob ich meinen Navigator zu ändern:

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

Was ich fehle?

Answer 1

So, um meine eigene Frage zu beantworten: Meine bedingte elegibilityLoading verursacht Probleme. Ich muss das umgestalten. Aber ich bin mir immer noch nicht sicher warum. Ich kann den Navigator nicht einmal in eine Ansicht einschließen oder der Bildschirm wird wieder weiß. Würde gerne den technischen Grund dafür wissen.

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

Dies ist zu erklären, warum gerade Ihre bedingte wird Ihnen Probleme verursacht:

<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