React-Native文章react-native-scrollable-tab-view(进阶篇).docx

文档介绍：React-Native文章react-native-scrollable-tab-view(进阶篇)
　　React Native系列文章(十一)react-native-scrollable-tab-view(进阶篇)
　　，导入Ionicons 。
　　import Icon from 'react-native-vector-icons/Ionicons';
　　，而不是内部写死，这样有利于扩展，所以我们添加两个prop：tabNames和tabIconNames
　　propTypes = {
　　...
　　tabNames: , // 保存Tab名称
　　tabIconNames: , // 保存Tab图标
　　}
　　
　　render() {
　　return (
　　{((tab, i) => (tab, i))}
　　);
　　}
　　这个方法很简单，返回一个容器View，容器View内包含的子View是通过遍历tabs，调用renderTabOption方法来动态生成的。
　　
　　renderTabOption(tab, i) {
　　const color = == i? "#6B8E23" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色
　　return (
　　(i)} style={}>
　　<ICON< p>
　　name={[i]} // 图标
　　size={30}
　　color={color}/>
　　{[i]}
　　);
　　}
　　这个方法应该也比较简单，使用TouchableOpacity包裹两个View：Icon和Text。
　　代码分析：
　　---------------------------start---------------------------
　　首先，判断i是否是当前选中的activeTab，来使用不同的颜色，然后：
　　TouchableOpacity：点击触发onPress方法，使用goToPage跳转到对应的tab
　　Icon：设置name(图标，使用tabIconNames[i]获取)，size(图标大小)，color(图标颜色)
　　Text：设置文本(使用tabNames[i]获取)，color(文字颜色)
　　---------------------------end---------------------------
　　
　　，导入ScrollableTabView 和 Weixi