React Native -- TabNavigator

前面一共写了几篇基础的文章：

• React Native -- 登录页面
• React Native -- 引导页面
• React Native -- NavigatorIOS

算是自己对RN的入坑礼吧，从这篇开始，以一个完整的项目为例，继续分享我的RN学习经历，有兴趣的可以关注下，没兴趣看看就好~~~不闲话了。

BB0EF242-D132-49CC-A321-008050D101CF.png

这里介绍如果实现一个TabNavigator页面，这里将以全新的项目为基础，所以新建一个工程，目录如下：

EF1AEED8-569C-4918-AF14-387F66B1CBD8.png

components目录放组件，image目录放项目图片资源，utils目录放一些工具类，view目录放页面。

首先这里使用到了第三方组件：react-native-tab-navigator 和 react-native-vector-icons，这里需要跳转到工程的目录下添加下依赖包：

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

添加依赖完成后，我们还需要把依赖包添加到工程中：

react-native link

这样工程就能访问到第三方组件了。

参看上面的工程目录图和效果图，我们需要创建一个TabBar的组件和一个主界面的View，看TabBar.js内容，首先导入相关的组件和页面：

import React, {Component} from 'react';
import {Text, Image, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import TabNavigator from 'react-native-tab-navigator';
import Homeview from '../view/MineView';

这里Homeview是随便一个页面，用里显示tabBarItem里面的页面，这里就不简单给出内容了，还需要把两个第三方组件导进来。

下面直接上TabBar.js的内容：

export default class TabBar extends Component {
    static defaultProps = {
        selectedColor: 'rgb(22,131,251)',
        normalColor: '#a9a9a9'
    };
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home',
            tabName: ['首页', '发现', '我']
        }
    }
    render() {
        const {selectedColor} = this.props;
        const {tabName} = this.state;
        return (
            
                 }
                    renderSelectedIcon={() => }
                    onPress={() => this.setState({ selectedTab: 'home' })}>
                    {}
                
                 }
                    renderSelectedIcon={() => }
                    onPress={() => this.setState({ selectedTab: 'compass' })}>
                    {}
                
                 }
                    renderSelectedIcon={() => }
                    onPress={() => this.setState({ selectedTab: 'me' })}>
                    {}
                
            
        );
    }
    componentWillMount() {
        const {selectedColor, normalColor} = this.props;
        Icon.getImageSource('md-home', 50, normalColor).then((source) => this.setState({ homeNormal: source }));
        Icon.getImageSource('md-home', 50, selectedColor).then((source) => this.setState({ homeSelected: source }));
        Icon.getImageSource('md-person', 50, normalColor).then((source) => this.setState({ meNormal: source }));
        Icon.getImageSource('md-person', 50, selectedColor).then((source) => this.setState({ meSelected: source }));
        Icon.getImageSource('md-compass', 50, normalColor).then((source) => this.setState({ compassNormal: source }));
        Icon.getImageSource('md-compass', 50, selectedColor).then((source) => this.setState({ compassSelected: source }));
    }
}
const styles = StyleSheet.create({
    tabbar: {
        height: 49,
        alignItems:'center',
        justifyContent: 'center',
        backgroundColor: '#fff'
    },
    tabStyle:{
        padding: 8
    },
    tab: {
        width: 22,
        height: 22
    }
});

这里我们需要定义一个默认颜色和选中颜色，还有一个tabBarItem的内容数组，其它的内容真不知道说什么了，就是第三方组件的调用了~~~个人认为， 先自己撸一次代码，不懂就直接查官网api或者搜索下资料，基本上能把大部分问题了。

再看主界面的内容，这个就更加简单了，就是调用了TabBar.js：

'use strict';
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import TabBar from '../components/TabBar';

export default class MainScene extends Component {
    constructor(props) {
        super(props);
    }

    render(){
        return(
            
                
            
        );
    }
}

这样我们在index里面直接调用MainView.js就能实现主界面的效果了：

import React, { Component } from 'react';
import {AppRegistry, Navigator} from 'react-native';
import MainView from './src/view/MainView';

export default class MyGitBook extends Component {
    render() {
        return (
             {
                      return 
                      }
                  }/>
        );
    }
}

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

目测RN学习已经走出了第一步，后面只有继续坚持，从最简单的做起，一步一步走下去，以前看着api总觉得很简单，但真正写起代码来还是各种懵逼，所以还是从最简单的练习做起。有兴趣围观的可以关注下我。

新手入门RN的同学们，千万不想相信 react native 中文网推荐的东方耀的视频，买了vip入去，发现视频不更新，先不说视频质量怎么样，感觉照搬某课网的，这都可以忍，但天天推广*点公益，也敢叫公益的公益。被骗得不要不要。