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

它会渲染正确的场景。

希望这会有所帮助！