美文网首页react native
react-native 第三方控件

react-native 第三方控件

作者: 苍天霸气诀 | 来源:发表于2017-12-13 18:14 被阅读0次

    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

    相关文章

      网友评论

        本文标题:react-native 第三方控件

        本文链接:https://www.haomeiwen.com/subject/wsezixtx.html