react-native-tab-navigation

原文地址

安装

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

引入

import TabNavigator from 'react-native-tab-navigator'
如下面所示：

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';


const dataSource = [
    {icon:require('./imgs/qq.png'),selectedIcon:require('./imgs/qiwei.jpg'),tabPage:'Home',tabName:'首页',component:Home},
    {icon:require('./imgs/qq.png'),selectedIcon:require('./imgs/qiwei.jpg'),tabPage:'Article',tabName:'文章',component:Article},
    {icon:require('./imgs/qq.png'),selectedIcon:require('./imgs/qiwei.jpg'),tabPage:'Order',tabName:'订单',component:Order},
    {icon:require('./imgs/qq.png'),selectedIcon:require('./imgs/qiwei.jpg'),tabPage:'Owner',tabName:'我的',component:Owner}
]
var navigation = {};
export default class App extends Component {
    constructor(props){
        super(props);
        navigation = this.props.navigation;
        console.log(navigation)
        this.state = {
            selectedTab:'Home'
        }
    }
    getItem(item){
        this.setState({selectedTab:item.tabPage})
        console.log(this.props);
    }
    render() {
        let tabViews = dataSource.map((item,i) => {
            return (
                <TabNavigator.Item
                    title={item.tabName}
                    selected={this.state.selectedTab===item.tabPage}
                    titleStyle={{color:'black'}}
                    selectedTitleStyle={{color:'#7A16BD'}}
                    renderIcon={()=><Image style={styles.tabIcon} source={item.icon}/>}
                    renderSelectedIcon = {() => <Image style={styles.tabIcon} source={item.selectedIcon}/>}
                    tabStyle={{alignSelf:'center'}}
                    badgeText={i+1}
                    onPress = {this.getItem.bind(this,item)}
                    key={i}
                >
                    <item.component  navigation={navigation}/>
                </TabNavigator.Item>
            );
        });
        return (
            <View style={styles.container}>
                <TabNavigator
                    hidesTabTouch={true}
                >
                    {tabViews}
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    tabIcon:{
        width:20,
        height:20,
        borderRadius:20
    }
});

下面具体说一下它的各个属性：

• 第一
  
• 第二
  

详细使用请查看官方文档