React-Native进阶_4.底部标签栏TabBar

原生项目中，我们对底部Tab 很熟悉，点击Tab标签可以切换页面，那么在React-Native 中我们该怎么实现呢。

在查了文档后，我们找到了一个TabBarIos ，这个是ios 下使用的Tab 标签，但是没有找到Android 可以使用的，因此 我们需要自己实现，或者使用第三方的，这里，刚接触React不太会自己实现，因此使用github上开源的react-native-tab-navigator，来实现切换的功能。

使用步骤：

安装

Make sure that you are in your React Native project directory and run:

npm install react-native-tab-navigator --save

使用

Import TabNavigator as a JavaScript module:

import TabNavigator from 'react-native-tab-navigator';

This is an example of how to use the component and some of the commonly used props that it supports:

<TabNavigator>  <TabNavigator.Item    selected={this.state.selectedTab === 'home'}    title="Home"    renderIcon={() => <Image source={...} />}    renderSelectedIcon={() => <Image source={...} />}    badgeText="1"    onPress={() => this.setState({ selectedTab: 'home' })}>    {homeView}  </TabNavigator.Item>  <TabNavigator.Item    selected={this.state.selectedTab === 'profile'}    title="Profile"    renderIcon={() => <Image source={...} />}    renderSelectedIcon={() => <Image source={...} />}    renderBadge={() => <CustomBadgeView />}    onPress={() => this.setState({ selectedTab: 'profile' })}>    {profileView}  </TabNavigator.Item></TabNavigator>

See TabNavigatorItem's supported props for more info.

/** * tabbar  demo */'use strict'import TabNavigator from 'react-native-tab-navigator'import React, {Component} from 'react';import styles from '../Styles/Main';import MovieList from './MovieList';import {    View,    Image,}from 'react-native';import USBox from "./USBox";const TAB_NORMAL_1=require('../Images/bottom_bar_01.png');const TAB_PRESS_1 =require('../Images/bottom_bar_01_selected.png');const TAB_NORMAL_2=require('../Images/bottom_bar_02.png');const TAB_PRESS_2=require('../Images/bottom_bar_02_selected.png');export default class TabBarComponent extends Component{    constructor(props) {        super(props);        this.state={            selectedTab:'home',        }    }        render(){            return(                <View  style={styles.Container}>                    <TabNavigator>                        <TabNavigator.Item                            selected={this.state.selectedTab === 'home'}                            title="Home"                            renderIcon={() => <Image source={TAB_NORMAL_1} style ={styles.icon} />}                            renderSelectedIcon={() => <Image source={TAB_PRESS_1}style ={styles.icon}  />}                            badgeText="1"                            onPress={() => this.setState({ selectedTab: 'home' })}>                            <MovieList />                        </TabNavigator.Item>                        <TabNavigator.Item                            selected={this.state.selectedTab === 'profile'}                            title="Profile"                            renderIcon={() => <Image source={TAB_NORMAL_2} style ={styles.icon} />}                            renderSelectedIcon={() => <Image source={TAB_PRESS_2} style ={styles.icon} />}                            onPress={() => this.setState({ selectedTab: 'profile' })}>                            <USBox />                        </TabNavigator.Item>                    </TabNavigator>                </View>            );    }}

实现Tab切换功能的代码就是 return 中的TabNavigator ,这里我添加了两个Tab标签。

标签构建基本介绍：

selected: bool型，是否选中状态，可使用setState进行控制，默认false
title: 标题，String类型，非必填
renderIcon: 必填项，即图标，但为function类型，所以这里需要用到Arrow Function
renderSelectedIcon: 选中状态的图标，非必填，也是function类型
onPress: function型，即点击事件的回调函数，这里需要控制的是state，而切换页面已经由控件本身帮我们实现好了

ps：记得在构造方法中指定默认选中标签： selectedTab。

指定两个Tab 切换要展示的页面  <MovieList />和 <USBox />。

实现效果：

源码下载

---------------欢迎各位大神加群

----------------Android交流群：230274309

-----------------------------期待大神们的到来

------------------------一---起分享，一起进步！需要你们