react native 怎么动态追加元素

很简单一个动画，不是么？用native实现实在是小菜一碟，现在我们试着用RN来实现它！

先将动画的视图结构搭建出来，这个比较简单，就是4个会变形的View顺序排列：

<View style={styles.square}>

<Animated.View style={[styles.line,{height:this.state.fV}]}></Animated.View>

<Animated.View style={[styles.line,{height:this.state.sV}]}></Animated.View>

<Animated.View style={[styles.line,{height:this.state.tV}]}></Animated.View>

<Animated.View style={[styles.line,{height:this.state.foV}]}></Animated.View>

</View>

自动添加 px。

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。

React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前 整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新，而且React能够批处理虚拟 DOM的刷新。

1、其实难点也就是多个Tab页，每个Tab页都有单独的Form表单，通过Modal的一个按钮如何控制，如何去校验多个表单。可以通过Ref实现此 *** 作

首先创建空的Ref数组

渲染界面，循环时每次创建一个Ref，和表单。并且这个表单用当前创建的Ref作为唯一标识。

2、表单子组件，将Form对象传递出去

3、create的时候，也就是点击Modald窗确定的时候，调用子组件的方法获取每个ref的Form对象，通过Promise.all方法判断是否都通过了校验

---