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>