React native 如何在Navigator中使用navigationBar？

导航栏节点

（可选）提供在整个场景中保持的导航栏 过渡

---

文档中没有给出该参数的预期示例或想法。我使用的是

Navigator

，注意到没有带路线标题和后退按钮的顶部栏，所以我假设我必须使用

navigationBar

以某种方式添加它，但我不知道如何使用。

您可以这样使用它：

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

{
返回}
导航栏={
}
/>
变量NavigationBarRouteMapper={
LeftButton（路线、导航器、索引、导航状态）{
如果（索引>0）{
返回(
{
如果（索引>0）{
navigator.pop（）；
} 
}}>
返回
)}否则{
返回空值}
},
右按钮（路线、导航器、索引、导航状态）{
返回null；
},
标题（路线、导航器、索引、导航状态）{
归还我的头衔
}
};

是本机导航栏示例项目文件夹：

了解更多信息的其他两种方法：

下载并在中运行（这本身就是了解所有本机模块/组件的好地方）

是一个实现了导航栏的RNPlay项目

---

您可以这样使用它：

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

{
返回}
导航栏={
}
/>
变量NavigationBarRouteMapper={
LeftButton（路线、导航器、索引、导航状态）{
如果（索引>0）{
返回(
{
如果（索引>0）{
navigator.pop（）；
} 
}}>
返回
)}否则{
返回空值}
},
右按钮（路线、导航器、索引、导航状态）{
返回null；
},
标题（路线、导航器、索引、导航状态）{
归还我的头衔
}
};

是本机导航栏示例项目文件夹：

了解更多信息的其他两种方法：

下载并在中运行（这本身就是了解所有本机模块/组件的好地方）

是一个实现了导航栏的RNPlay项目

---

谢谢，这很有帮助！但是在您的导航映射器中，您如何知道使用属性

LeftButton

、

RightButton

、和

Title

，以及这些参数是什么？当然，请检查。看看这些道具。另外，有关引擎盖下导航器的更多信息。谢谢，这很有帮助！但是在您的导航映射器中，您如何知道使用属性

LeftButton

、

RightButton

、和

Title

，以及这些参数是什么？当然，请检查。看看这些道具。另外，有关发动机罩下导航器的更多信息。