react-native利益点轮播组件详解

一，性能优化

1，优化添加子元素

如果把所有的子元素添加到容器里，会比较耗性能。
只把需要显示的子元素添加到容器里，每次动画结束后，更新子元素

this.state.childrens.slice(
	this.state.index,
	this.state.index + showNum
)

index为当前动画的子元素下标。
showNum为添加子元素的个数。
childrens为所有元素的集合

2，优化运动元素

采用运动外框而不是每个元素

3，采用用户传进的children

通过this.props.children获取到用户传给组件的元素，可以把操作子元素的权限交给用户

二，功能多样性

1，可竖向滚动，也可横向滚动，以及多个动效一起滚动

2，显示多个及滚动多个元素

三，可配置

1，速率，延时，各种滚动动效

<JmddRnBubble
	delay={1000}
	duration={1000}
	distance={75}
	easing="bezier(.79,.01,.33,1.21)"
	direction="y"
> 
	{children }
</JmddRnBubble>

delay：配置延迟时间，单位毫秒；
duration：配置动效时间；
distance：配置滚动距离；
direction:配置滚动方向（y为竖向，x为横向）
showNum：配置显示多个元素
step：配置一次滚动多个元素
easing：配置动画效果，默认值（back 提供一个简单的动画，其中对象在前进之前稍微向后移
bounce 提供弹跳动画
ease 提供简单的惯性动画
elastic 提供简单的弹簧互动
）
也可以设置bezier 提供三次贝塞尔曲线
举例：bezier(.79,.01,.33,1.21)

四，适配3端

1，很好的兼容原生的android和ios

通过设置useNativeDriver: true,启动元生驱动
isInteraction: false 因为这是循环动画，会导致其他任务永远无法执行了，所以设置为false

2，降级web

使用.start()启动动效，可以传给start一个回调函数，动效结束后执行。
在原生有loop函数时，循环动效交给原生执行，不用桥接每一帧动效。在web没有loop函数时，在start函数里重新调用动效。