Question

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

navigationBar 节点

（可选）提供在场景中保留的导航栏   转换

文档没有提供任何示例或想法此参数所期望的内容。我使用Navigator并注意到没有带有路线标题和后退按钮的顶栏，所以我假设我必须使用navigationBar以某种方式添加它，但我可以＆＃39;弄清楚如何。

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是React Native Navigation Bar示例项目文件夹：https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/Navigator/NavigationBarSample.js

另外两种了解此问题的方法：

下载React Native并在Navigator Examples中运行UI Explorer project（这本身就是了解所有本机模块/组件的一个很酷的地方）。
Here是一个实施了navigationBar的RNPlay项目。

如何在Navigator中使用navigationBar？

1 个答案: