React Native学习之路(3)-组件篇（TabBar）react-native-tab-navigator

github地址：https://github.com/happypancake/react-native-tab-navigator

(1) react-native-tab-navigator安装

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

(2) react-native-tab-navigator导入

import TabNavigator from 'react-native-tab-navigator' //组件名可以随便取，但所有的组件名要保持一致

(3) react-native-tab-navigator使用

• TabNavigator.Item ：每个选项卡的组件名
• selected ：当前选项卡是否被选中
• title ：每个选项卡的tab导航文字（底部菜单文字说明）
• titleStyle ：（底部菜单的文字样式）
• selectedTitleStyle ：（选中状态的底部菜单文字的样式）
• renderIcon ：每个选项卡的tab导航的图标（底部菜单logo）
• renderSelectedIcon ：（选中状态）tab导航的图标（底部菜单logo）
• badgeText ：提示的角标数字
• onPress ：点击事件响应函数
• tabBarStyle ：设置tabNavigator的底部菜单栏样式
• sceneStyle ：设置tabNavigator的浏览页的样式
• hidesTabTouch ：bool类型，即是否隐藏Tab按钮的按下效果
  相关链接：http://lib.csdn.net/article/reactnative/36484

(4)react-native-vector-icons图标库 （vector矢量的意思）

github地址：https://github.com/oblador/react-native-vector-icons

(5)自定义组件的导入，导出和引用

（1）自定义组件，并导出
export default List  extends Component {
         render() {
               return(
                   
                               这里是自定义组件
                   
              );
          }
}
-
-
（2）引入自定义组件，并使用
import List from '本地路径'；
export default Home extends Component {
         render() {
               return(
                   
                                 //使用
                   
              );
          }
}

完整代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Image
}from 'react-native';

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

import List from './app/creation/index';
import Account from './app/account/index';
import Edit from './app/edit/index';
// import Icon from 'react-native-vector-icons/Ionicons';
export default class bb extends Component{
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home'
        }
    };


    render() {
        return(
            
                
                     }
                        renderSelectedIcon={ () => }
                        onPress={ () => this.setState({ selectedTab: 'quan'}) }
                    >
                       
                    


                     }
                        renderSelectedIcon={ () => }
                        onPress={ () => this.setState({ selectedTab: 'tang'}) }
                    >
                        这里是健康堂页面
                    

                     }
                        renderSelectedIcon={ () => }
                        onPress={ () => this.setState({ selectedTab: 'home'}) }
                    >
                        
                    

                     }
                        renderSelectedIcon={ () => }
                        onPress={ () => this.setState({ selectedTab: 'che'}) }
                    >
                        
                            车车车
                        

                    

                     }
                        renderSelectedIcon={ () => }
                        onPress={ () => this.setState({ selectedTab: 'my'}) }
                    >
                        
                    
                
            
        );
    }
}

const styles = StyleSheet.create({
    a: {
        flex:1
    },
    icons: {
        width:35,
        height: 35,
        marginTop: 10
    },
    icons2: {
        width:38,
        height: 34,
        marginTop: 10
    },
    icons3: {
        width:32,
        height: 31,
        marginTop: 10
    },
    oneText: {
        fontSize: 30
    },
    icons4: {
        width:32,
        height: 35,
        marginTop: 10
    },
    icons6: {
        width:36,
        height: 32,
        marginTop: 10
    },
    homeList: {
        flex:1,
        justifyContent: 'center',
        alignItems: 'center'
    }


});

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

react-native-tab-navigator导航效果图