React-Native Navigator無法渲染

Question

我想在React-Native（Android）上使用Navigator在場景之間創建路由，但是導航器不會渲染場景，下面是我創建的一個簡單片段。

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

這應該呈現文本Hello, World!，而是一個純白色的屏幕上顯示出了在模擬器上。

Answer 1

只是想出了爲什麼會發生這種情況，由於renderScene接受了一個函數，它必須返回一個反應本機UI的單個對象。因此，UI代碼必須內View被包裹在下面這些例子中看出：

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

Answer 2

可以使用Navigator成分是這樣的：使用

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

    }} /> 

這樣，你可以去到另一個頁面

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

或

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

它會渲染正確的場景。

希望這會有所幫助！