React Native学习之路(3)-组件篇（TabBar）r

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(
                   <View >
                               <Text>这里是自定义组件</Text>
                   </View>
              );
          }
}
-
-
（2）引入自定义组件，并使用
import List from '本地路径'；
export default Home extends Component {
         render() {
               return(
                   <View >
                               <List></List>  //使用
                   </View>
              );
          }
}

完整代码:

/**
 * 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(
            <View style={styles.a}>
                <TabNavigator
                    tabBarStyle={{ height:70 , backgroundColor:'white'}}
                    sceneStyle={{ backgroundColor: 'yellow', }}
                >
                    <TabNavigator.Item
                        selected={ this.state.selectedTab === 'quan'}
                        title="养生圈"
                        titleStyle={{ fontSize:14 , color:'#5f5f5f'}}
                        selectedTitleStyle= {{ color: '#3498ff'}}
                        renderIcon={ () => <Image source={ require('./home.png') } style={ styles.icons6}/>}
                        renderSelectedIcon={ () => <Image source={ require('./home1.png') } style={ styles.icons6}/>}
                        onPress={ () => this.setState({ selectedTab: 'quan'}) }
                    >
                       <Edit></Edit>
                    </TabNavigator.Item>


                    <TabNavigator.Item
                        selected={ this.state.selectedTab === 'tang'}
                        title="健康堂"
                        titleStyle= {{ fontSize:15 , color:'#5f5f5f'}}
                        selectedTitleStyle= {{ color: '#3498ff'}}
                        renderIcon={ () => <Image source={ require('./17.png') } style={ styles.icons3}/>}
                        renderSelectedIcon={ () => <Image source={ require('./18.png') } style={ styles.icons3}/>}
                        onPress={ () => this.setState({ selectedTab: 'tang'}) }
                    >
                        <Text>这里是健康堂页面</Text>
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={ this.state.selectedTab === 'home'}
                        title="主页"
                        titleStyle= {{ fontSize:15 , color:'#5f5f5f'}}
                        selectedTitleStyle= {{ color: '#3498ff'}}
                        renderIcon={ () => <Image source={ require('./11.png') } style={ styles.icons4}/>}
                        renderSelectedIcon={ () => <Image source={ require('./12.png') } style={ styles.icons4}/>}
                        onPress={ () => this.setState({ selectedTab: 'home'}) }
                    >
                        <List></List>
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={ this.state.selectedTab === 'che'}
                        title="拟购车"
                        titleStyle= {{ fontSize:15 , color:'#5f5f5f'}}
                        selectedTitleStyle= {{ color: '#3498ff'}}
                        renderIcon={ () => <Image source={ require('./15.png') } style={ styles.icons2}/>}
                        renderSelectedIcon={ () => <Image source={ require('./16.png') } style={ styles.icons2}/>}
                        onPress={ () => this.setState({ selectedTab: 'che'}) }
                    >
                        <View style={ styles.oneView}>
                            <Text>车车车</Text>
                        </View>

                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={ this.state.selectedTab === 'my'}
                        title="我的"
                        titleStyle= {{ fontSize:15, color:'#5f5f5f' }}
                        selectedTitleStyle= {{ color: '#3498ff'}}
                        renderIcon={ () => <Image source={ require('./13.png') } style={ styles.icons}/>}
                        renderSelectedIcon={ () => <Image source={ require('./14.png') } style={ styles.icons}/>}
                        onPress={ () => this.setState({ selectedTab: 'my'}) }
                    >
                        <Account></Account>
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

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导航效果图