React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。
React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前 整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新,而且React能够批处理虚拟 DOM的刷新。
很简单一个动画,不是么?用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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)