react-native-scrollable-tab-view 使用总结

react-native-scrollable-tab-view  系统会 默认根据  view  和  tab标签的 渲染顺序有关 一一对应


goToPage    : React.PropTypes.func, //要跳到哪里 
    activeTab   : React.PropTypes.number,
    tabs        : React.PropTypes.array,
也就是这里要做的

import ScrollableTabView from 'react-native-scrollable-tab-view'

<ScrollableTabView 
    renderTabBar={() => //设置下面的页签
        <TabBar
            tabNames={tabTitles}
            tabIconNames={tabIcons}
            selectedTabIconNames={tabSelectedIcon}
        />
    }
    tabBarPosition='bottom'
    locked
    scrollWithoutAnimation
    onChangeTab={this._onChangeTab}
> 
	以下是 页签上的view   改变顺序 tab 和view 的对应顺序改变
    <Feed tabLabel="Home" navigator={this.props.navigator}/>
    <FoodEncyclopedia tabLabel="Food" navigator={this.props.navigator}/>

    <Profile tabLabel="Profile" navigator={this.props.navigator}/>
</ScrollableTabView>

 class TabBar
static propType = {
    goToPage    : React.PropTypes.func, //要跳到哪里 
    activeTab   : React.PropTypes.number,
    tabs        : React.PropTypes.array,

    tabNames    : React.PropTypes.array,
    tabIconNames: React.PropTypes.array
};
<View style={[styles.tabs, {borderTopWidth: Common.window.onePR}]}>
    {this.props.tabs.map((tab, i) => { //根据系统的 tabs  来绝对数量
        let color = this.props.activeTab === i ? 'red' : 'gray';
        let icon = this.props.activeTab == i ? this.props.selectedTabIconNames[i] : this.props.tabIconNames[i];
        return (
            <TouchableOpacity
                key={i}
                activeOpacity={0.8}
                style={styles.tab}
                onPress={()=>{this.props.goToPage(i);this.tost(i)}}
            >
                <View style={styles.tabItem}>
                    <Image
                        style={styles.icon}
                        source={icon}
                    />
                    <Text style={{color: color, fontSize: 12}}>
                        {this.props.tabNames[i]}
                    </Text>
                </View>
            </TouchableOpacity>
        )
    })}
</View>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值