React-Native Navigator nicht Rendern

Question

Ich versuche, Routing zwischen Szenen mit dem Navigator auf React-Native (Android) zu erstellen, aber Navigator wird die Szene nicht wiedergeben, Hier ist ein einfaches Snippet, das ich erstellt habe. Dies sollte der Text Hello, World!, aber ein einfacher weißer Bildschirm zeigte sich auf dem Emulator machen

<View> 
    <Navigator 
    initialRoute={{ name: 'LoginView' }} 
    renderScene={(route, naigator) => { 
     <Text styles={{fontSize: 20, fontWeight: 'bold'}}>Hello, World!</Text>    
    }} 
    /> 
</View> 

.

Answer 1

Nur herausgefunden, warum dies passiert, Da renderScene eine Funktion übernimmt, muss es ein einzelnes Objekt der nativen Benutzeroberfläche zurückgeben. So ist die UI-Code muss in View gewickelt werden, wie in diesen Beispielen zu sehen unter:

<Navigator 
    initialRoute={{ title: 'Awesome Scene'}} 
    renderScene={(route, navigator) => { 
    <View> 
     <Text>Hello, World!</Text> 
     <Text>Hi, There</Text> 
    </View> 
    }} 
/> 

Answer 2

Sie die Navigator Komponente wie diese verwenden:

<Navigator 
    style={{flex: 1}} 
    ref={thisRef => {this.navigator = thisRef}} 
    initialRoute={{ title: 'Awesome Scene', index: 0}} 
    renderScene={(route, navigator) => { 

     if(route.index == 0) { 
      return <View> 
       <Text>Hello, World!</Text> 
      </View> 
     } 

     if(route.index == 1) { 
      return <View> 
       <Text>Hi, There</Text> 
      </View> 
     } 

     if(route.index == 2) { 
      return <View> 
       <Text>Hi, There...again!</Text> 
      </View> 
     } 

    }} /> 

diese Weise können Sie auf eine andere Seite gehen können mit

this.navigator.push({title: "Awesome Scene 2", index: 1}) 

oder

this.navigator.push({title: "Awesome Scene 3", index: 2}) 

und es wird die richtige Szene rendern.

Hoffe, das hilft!