如何在导航器中使用导航栏？

Question

https://facebook.github.io/react-native/docs/navigator.html#content

的导航栏节点

选择性地提供跨场景持续 转换

文档没有给出例子或者知道这是什么参数需要一个导航栏。我使用Navigator，发现没有带路线标题和后退按钮顶吧，所以我想我要补充它在某种程度上使用navigationBar，但我无法弄清楚如何。

Answer 1

你可以使用这样的：

<Navigator 
    initialRoute={{name: 'My First Scene', index: 0}} 
    renderScene={(route, navigator) => { 
    return <Page navigator={navigator} name={route.name} index={route.index}/> }} 
    navigationBar={ 
    <Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} />} 
/> 

var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
    if(index > 0) { 
     return (
     <TouchableHighlight style={{marginTop: 10}} onPress={() => { 
      if (index > 0) { 
       navigator.pop(); 
      } 
     }}> 
     <Text>Back</Text> 
    </TouchableHighlight> 
)} else { 
return null} 
}, 
    RightButton(route, navigator, index, navState) { 
    return null; 
    }, 
    Title(route, navigator, index, navState) { 
    return <Text>My Title</Text> 
    } 
}; 

Here是阵营本地导航栏示例项目文件夹：https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/Navigator/NavigationBarSample.js

两个其他的方式来了解这个：

1. 下载React Native并在UI Explorer project运行Navigator Examples（这本身是一个很酷的PLA以了解所有本地模块/组件）。

2. Here与实施的导航栏一个RNPlay项目。