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

推荐阅读更多精彩内容