native react 二级菜单_React Native - 实现一个简单的分页导航菜单（tab标签切换）...

分页菜单(分段菜单)在许多 App上都会用到。大多数新闻 App，如网易新闻、今日头条等，顶部都有个导航菜单。这个导航菜单是一组标签的集合，每个标签表示一个新闻类别，我们点击这个标签后下面就会切换到对应的分页面。

下面我们使用 React Native来实现一个简单的分页菜单功能。

1，效果图

(1)界面顶部的菜单栏中有 4个标签，点击标签即可切换到对应的页面。

(2)当前选中的菜单标签背景为灰色，其他标签背景为白色。

        

2，样例代码

(1)菜单栏组件(NaviBar.js)

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

TouchableHighlight,

Dimensions

} from 'react-native';

//获取设备的宽度和高度

var {

height: deviceHeight,

width: deviceWidth

} = Dimensions.get('window');

export default class NaviBar extends Component {

componentWillMount() {

//通过属性得知哪个导航按钮是当前的导航也，这个导航按钮将用灰色背景

this.buttonColors = this.props.naviBarStatus.map(

function(aNumber) {

if (aNumber == 0) return 'white';

return 'gray';

}

);

}

//四个按钮被按下时处理函数

_naviTab0Pressed() {

this.props.onNaviBarPress(0);

}

_naviTab1P