ReactNative 学习笔记 初战

Posted on By Vivian Sun

React Native中没有DOM的概念,只有组件的概念。
因此在ReactJS中使用的Html标签以及对DOM的操作是不起作用的。
不过组件的生命周期、JSX的语法、事件绑定、自定义属性等,在RN和ReactJS中是一样的。

用组件嵌套组件的方式实现,效果图:
效果图

其中的大概逻辑是:

MargginBox :使用Box,childName=”borderBox”,通过{this.props.children}把内部子组件传给子组件Box

BorderBox :使用Box,childName=”paddingBox”,通过{this.props.children}把内部子组件传给子组件Box

PaddingBox :使用Box,childName=”elementBox”,通过{this.props.children}把内部子组件传给子组件Box

ElementBox :最内层的组件

Sample Code