NavigationBar

CRN 框架提供了大量默认导航栏按钮（当然，这些按钮你也可以用在其他地方）。

NavigationBar

NavigationBar 是一个全局的导航栏控件，所有页面共用同一个导航栏容器，每个页面配置独立的元素。

页面不能获取 NavigationBar 控制权，所以只能通过 NavigationBar 提供的接口来配置左、中、右三块区域的UI功能。

NavigationBar 显示/隐藏

受 NavigationBar 本身限制，NavigationBar 一个app 实例内只支持在初始化时传入是否隐藏，不支持单个页面单独控制。

在入口组件初始化时通过navigationBarConfig参数传入，详情请参看下面的示例代码：

// main.js

import page1 from './src/Page1.js';
import page2 from './src/Page2.js';

const pages = [
    {
        component:page1,
        name:'page1',
        isInitialPage:true,
    },
    {
        component:page2,
        name:'page2',
    }
];

const navigationBarConfig = {
    hide:true, // 默认为 false
};

class HelloWorld extends App {
    constructor(props) {
        super(props);
        this.init({pages, navigationBarConfig});
    }
}

AppRegistry.registerComponent('HelloWorld', () =
>
 HelloWorld);

NavigationBar 背景色

受 NavigationBar 本身限制，NavigationBar 一个app 实例内只支持在初始化时传入背景颜色，不支持单个页面单独控制。

在入口组件初始化时通过navigationBarConfig参数传入，详情请参看下面的示例代码：

// main.js

import page1 from './src/Page1.js';
import page2 from './src/Page2.js';

const pages = [
    {
        component:page1,
        name:'page1',
        isInitialPage:true,
    },
    {
        component:page2,
        name:'page2',
    }
];

const navigationBarConfig = {
    hide:true, // 默认为 false
    backgroundColor:'rgb(1, 100, 200)', // 导航栏背景色
};

class HelloWorld extends App {
    constructor(props) {
        super(props);
        this.init({pages, navigationBarConfig});
    }
}

AppRegistry.registerComponent('HelloWorld', () =
>
 HelloWorld);

NavigationBar title

有两种方式设置页面 title：

• app 入口处配置
• 页面 constructor 方法中赋值

第一种方式比较直观，示例代码如下：

// main.js

import page1 from './src/Page1.js';
import page2 from './src/Page2.js';

const pages = [
    {
        component:page1,
        name:'page1',
        title:'页面一标题',
        isInitialPage:true,
    },
    {
        component:page2,
        name:'page2',
        title:'页面二标题',
    }
];

const navigationBarConfig = {
    hide:true, // 默认为 false
    backgroundColor:'rgb(1, 100, 200)', // 导航栏背景色
};

class HelloWorld extends App {
    constructor(props) {
        super(props);
        this.init({pages, navigationBarConfig});
    }
}

AppRegistry.registerComponent('HelloWorld', () =
>
 HelloWorld);

第二种方式适合动态配置，比如根据前一个页面的传值决定 title 内容：

//Page1.js

class Page1 extends Page {
    constructor(props) {
        super(props);
        this.props.page.title = this.props.passedTitle;//上一个页面传过来的
    }

    render() {
        return (

<
ViewPort
>
<
View style={styles.container}
>
<
Text style={styles.welcome}
>

                    Welcome to Page1

<
/Text
>
<
Text style={styles.instructions}
>

                    Shake or press menu button for dev menu

<
/Text
>
<
/View
>
<
/ViewPort
>

        );
    }

NavigationBar 左侧按钮

如果没有特殊需求，可以不用关心左侧按钮，NavigationBar 默认封装了与 Native 一致的默认返回按钮，并且处理了返回事件。

详细可以参看导航栏按钮