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的刷新。

className动态添加

可以实现的语法如下：

1、使用逻辑运算符

2、使用三元运算符

3、使用函数

4、数组语法

5、使用ES6写法（推荐使用ES6写法）

或者使用classnames依赖库

style动态添加

1、当前标签无其他class，并且只动态添加一个className

---