react-native 第三方控件

react-native-tab-navigator

网址：
https://github.com/happypancake/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';
import PopularPage from "./PopularPage"
export  default  class HomePage extends Component{
    constructor(props){
        super(props)
        this.state={
           selectedTab:'popular'
        }
    }
   render() {
       return (
           <View style={styles.container}>
            <TabNavigator
             >
                <TabNavigator.Item
                    selected={this.state.selectedTab=='popular'}
                    title="最热"
                    badgeText="1"
                    renderBadge={()=><View style={styles.badgeView}><Text style={styles.badgeText}>10</Text></View>}
                    selectedTitleStyle={{color :'#63B8FF'}}
                    renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_popular.png')}/>}
                    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_popular.png')}/>}
                    onPress={() => this.setState({selectedTab: 'popular'})}

                >
                    {/*选项卡对应的页面*/}
                  <PopularPage/>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab=='trending'}
                    title="趋势"
                    selectedTitleStyle={{color :'#63B8FF'}}
                    renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_trending.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_trending.png')}/>}
                    onPress={() => this.setState({selectedTab: 'trending'})}
                >
                    <View style={{backgroundColor:'#0F0',flex:1}}></View>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'favorite'}
                    title="收藏"
                    selectedTitleStyle={{color: '#63B8FF'}}
                    renderIcon={() =>
                        <Image style={styles.icon} source={require('../../res/images/ic_favorite.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_favorite.png')}/>}
                    onPress={() => this.setState({selectedTab: 'favorite'})}
                >
                    <View style={{backgroundColor:'#0F0',flex:1}}></View>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'my'}
                    title="我的"
                    selectedTitleStyle={{color: '#63B8FF'}}
                    renderIcon={() =>
                        <Image style={styles.icon} source={require('../../res/images/ic_my.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_my.png')}/>}
                    onPress={() => this.setState({selectedTab: 'my'})}
                >
                    <View style={{backgroundColor:'#00F',flex:1}}></View>
                </TabNavigator.Item>

            </TabNavigator>
           </View>
       );
   }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    icon:{
        width:24,
        height:24
    },
    badgeView:{
        width:22,
        height:14 ,
        backgroundColor:'#f85959',
        borderWidth:1,
        marginLeft:10,
        marginTop:3,
        borderColor:'#FFF',
        alignItems:'center',
        justifyContent:'center',
        borderRadius:8,
    },
    badgeText:{
        color:'#fff',
        fontSize:8,
    }
});

react-native-scrollable-tab-view

网址：https://github.com/skv-headless/react-native-scrollable-tab-view

npm install react-native-scrollable-tab-view --save 下载

 <ScrollableTabView
                tabBarBackgroundColor="#63B8FF"
                tabBarActiveTextColor="#FFF"
                tabBarInactiveTextColor="#F5FFFA"
                tabBarUnderlineStyle={{backgroundColor:"#E7E7E7",height:2}}>
                <Text tabLabel='IOS'/>
                <Text tabLabel='Android'/>
                <Text tabLabel='Java'/>
                <Text tabLabel='JavaScript'/>
            </ScrollableTabView>

tabLabel 这个属性是必须的而且要唯一值，其实就就是显示滚动的那个字

1513160004(1).jpg