react-native Navigator.NavigationBar - 文档在哪里? [英] react-native Navigator.NavigationBar - where are the docs?

查看:41
本文介绍了react-native Navigator.NavigationBar - 文档在哪里?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在网上看到了一些使用 Navigator.NavigationBar 的例子.看起来很方便,但我不知道如何使用它.任何地方都有文档吗?

I've seen a few examples online using Navigator.NavigationBar. It looks handy but I don't know how to use it. Are there docs anywhere?

推荐答案

官方没有引导 Navigator.Navigation Bar.但是在互联网上你可以找到它是如何工作的例子.下面是我用于我的一个项目的示例.

Officially there is no guide Navigator.Navigation Bar. But looking on the internet you can find examples of how it works. Below is an example that I used for one of my projects.

var PageOne = require('./pageone'),
    PageTwo = require('./pagetwo');


var NavigationBarRouteMapper = { 
  LeftButton: function( route, navigator, index, navState ){
    return(
      <Text>{ route.leftButton }</Text>
    )
  },
  Title: function( route, navigator, index, navState ){
    return(
      <Text>{ route.title }</Text>
    )
  },
  RightButton: function( route, navigator, index, navState ){
    return(
      <Text>{ route.rightButton }</Text>
    )
  }
}

var App = React.createClass({

  renderScene: function( route, nav ) {
    switch (route.id) {
      case 'PageOne':
        return <PageOne navigator={ nav } title={ "PageOne" } />
      case 'PageTwo':
        return <PageTwo navigator={ nav } leftButton={ "Back" } title={ "PageTwo" } />;
    }
  },

  render: function() {
    return (
      <Navigator
        initialRoute={{ id: 'PageOne', title: 'PageOne' }}
        renderScene={ this.renderScene }
        configureScene={( route ) => {
          if ( route.sceneConfig ) {
            return route.sceneConfig;
          }
          return Navigator.SceneConfigs.FloatFromRight;
        }}
        navigationBar={
          <Navigator.NavigationBar 
            routeMapper={ NavigationBarRouteMapper } 
          />
        } 
      />
    );
  },
});

这篇关于react-native Navigator.NavigationBar - 文档在哪里?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆