每个项目产品都要加埋点，加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧
http://www.520webtool.com/
自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄
示例图.gif
前言：他方山上有佳石，可以用来琢玉器。只有解决了一个红屏，才有机会遇见另一个红屏。只有解决了一个困难，才有机会遇到其他的困难。O(∩_∩)O~生命不息，奋斗不止。
React Native中有许多第三方用于封装tabBar的库，当然也有官方提供的。React-native-scrollable-tab-view是一款非常实用的第三方库。放于界面之上可以实现一个界面中子界面的切换效果，置于界面之下可实现功能模块间的切换，通常用于封装自定义的tabBar。
在终端输入命令 npm i react-native-scrollable-tab-view --save 这条命令中--save的目的是让它写入到package.json文件中去。如若在安装的过程中提示没有权限安装等信息，请在这条命令的后面加上 --force强制安装。
确认安装 打开package.json文件，如若看到下图所示的效果，则说明安装正确。
203DE339-1541-4DB7-A6B6-EF6FF7D8F47B.png
8E4B4AF5-3293-4CD4-B5E0-95C544E3859C.png
onChangeTab:切换界面的时候会调用该方法，该属性中包含一个参数，它是一个object对象，这个对象有两个参数，i表示被选中的下标，ref表示被选中的对象。 onChangeTab = {(obj)=>{console.log('被选中的下标:'+obj.i);}} onScroll:视图滑动时调用，该属性会传递一个Float类型的数字，范围是[0,tab的数量-1] onScroll={ (position) => { console.log('滑动时的位置：' + position); } } locked:手指是否能拖动，默认为false（可拖动）,如为true则表示只能通过点击tab来切换视图。 locked={false} initialPage:初始化时被选中的下标，默认为0 initialPage={0} page:设置选中指定的tabchildren:表示所有子视图的数组tabBarUnderlineColor:设置Tab选中时下方横线的颜色。注意，该属性只是在系统提供的DefaultTabBar和ScrollableTabBarTab状态下才有效果。 renderTabBar={() => <ScrollableTabBar/>} tabBarUnderlineColor={'red'} tabBarBackgroundColor:整个tabBar的背景颜色。tabBarActiveTextColor/tabBarInactiveTextColor: 选中/未选中的tabBar的文字颜色tabBarTextStyle:提供一个object对象的参数，用于设置文字的样式，如字体字号style：这是所有view都拥有的属性scrollWithoutAnimation:切换tab时，是否有动画默认是false，即没有。prerenderingsiblingsNumber:默认为0,表示预渲染视图的个数，为0表示只渲染当前页。效果图.gif
1、构建项目 为了使iOS端和android端能更和谐的使用一套代码。先创建一个入口文件取名为APP.js。此时，index.iOS.js和index.android.js文件就只需要引入APP.js文件即可。
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ //iOS端和安卓端公用一套代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import App from './APP' export default class babyShow extends Component { render() { return ( <App/> ); } } AppRegistry.registerComponent('babyShow', () => babyShow);2、封装自定义的TabBar。取名为MyTabBar.js 封装时要注意，有三个属性是系统传入的。即goToPage、activeTab、tabs。所以要先在规定属性类型时先写上这三个属性。其他的属性则可以自己选择。 在使用tabbar的时候，通常会用到图片。这里可以使用第三方的图库。 安装方法如下： npm install react-native-vector-icons --save 安装好了之后记得一定要输入下面的命令 rnpm link 重新编译即可使用
import Icon from 'react-native-vector-icons/Ionicons'; //这个是图标以下是整个MyTabBar文件的全部代码。
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; //这个是图标 export default class MyTabBar extends Component { static propTypes = { goToPage: React.PropTypes.func, // 跳转到对应tab的方法 activeTab: React.PropTypes.number, // 当前被选中的tab下标 tabs: React.PropTypes.array, // 所有tabs集合 tabNames: React.PropTypes.array, // 保存Tab名称 tabIconNames: React.PropTypes.array, // 保存Tab图标 }; // 注意这里有分号 render() { return ( <View style={styles.tabs}> {/*遍历。系统会提供一个tab和下标 调用一个自定义的方法*/} {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))} </View> ); } componentDidMount() { // Animated.Value监听范围 [0, tab数量-1] this.props.scrollValue.addListener(this.setAnimationValue); } setAnimationValue({value}) { console.log('动画值：'+value); } /// 处理tabbar的颜色和字体及图标 renderTabOption(tab, i) { let color = this.props.activeTab == i ? "#FF3399" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色 return ( //因为要有点击效果 所以要引入可触摸组件 <TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab} key={tab}> <View style={styles.tabItem}> <Icon name={this.props.tabIconNames[i]} // 图标 调用传入的属性 size={30} color={color}/> <Text style={{color: color}}> {this.props.tabNames[i]} </Text> </View> </TouchableOpacity> ); } } const styles = StyleSheet.create({ tabs: { flexDirection: 'row', height: 50, }, tab: { flex: 1, justifyContent: 'center', alignItems: 'center', }, tabItem: { flexDirection: 'column', alignItems: 'center', }, });3、调用自定义的tabbar文件 在APP.js文件中，把属性tabNames和tabIconNames属性定义在状态机上，然后传入到属性中。
import React,{Component} from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view'; import Icon from 'react-native-vector-icons/Ionicons'; import IconFont from 'react-native-vector-icons/FontAwesome'; import MyTabBar from './Common/MyTabBar'; export default class APP extends Component { constructor(props) { super(props); this.state = { tabNames: ['主页', '分类', '她他群','我的'], tabIconNames: ['ios-home', 'ios-grid', 'logo-buffer', 'ios-contact'], }; } render() { let tabNames = this.state.tabNames; let tabIconNames = this.state.tabIconNames; return ( <ScrollableTabView //renderTabBar={() => <DefaultTabBar/>} renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>} tabBarPosition={'bottom'} onChangeTab={ (obj) => { console.log('被选中的tab下标：' + obj.i); } } onScroll={ (position) => { console.log('滑动时的位置：' + position); } } locked={false} initialPage={0} prerenderingSiblingsNumber={1} > {/*每个页面 设定四个页面*/} <View tabLabel="page1" style={styles.center}> <Text >每一天都不同</Text> <IconFont.Button name="facebook" backgroundColor="#FF3399" size={20} > 妲己会一直爱主人 </IconFont.Button> <Icon name="md-alarm" size={50}></Icon> <IconFont.Button name="twitter" backgroundColor="#FF3399" size={20} > 因为被设定成这样 </IconFont.Button> </View> <View tabLabel="page2" style={styles.center}> <Text style={{color:'pink'}}>小乔要努力变强</Text> </View> <View tabLabel="page3" style={styles.center}> <Text style={{color:'red'}}>萝莉身御姐心</Text> </View> <View tabLabel="page4" style={styles.center}> <Text style={{color:'#70f3ff'}}>别靠近我,阿福不想带来不幸</Text> </View> </ScrollableTabView> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, center: { flex: 1, justifyContent: 'center', alignItems: 'center', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });作者：谦谦君子修罗刀 链接：https://www.jianshu.com/p/a730190994c2 来源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
