HTML5-reactnative

reactnative—需要在官网上学习

用react库开发一些移动端应用是reactnative
HTML5-reactnative
HTML5-reactnative
HTML5-reactnative

一般dom的更新都是对整个dom树的更新
React框架对dom 的操作可以减少对dom树的更新。先找虚拟的dom,再在页面上对相应的节点更新,不是对整个dom树的更新。

React.js开发网页小例子
在html中引入js文件
Html文件
HTML5-reactnative
js文件新写法
HTML5-reactnative
js文件旧写法(不推荐使用)
HTML5-reactnative
注意:标签一定要和return在一行
Jsx就是javascriptxml,就是可以在js中写html,要转化语法,从es6转换为jsx

Reactnative开发app小例子
要引入相应的库,除了react基础库外,还有react-native的库
HTML5-reactnative
HTML5-reactnative
样式变的构建与引入如上图
HTML5-reactnative
最后要注册,第一个是项目的名称,必须与init 的项目名称一致,第二个是class后的名字。
HTML5-reactnative
HTML5-reactnative

View——-可以嵌套

HTML5-reactnative
HTML5-reactnative
纵向一定要设置flex:1
HTML5-reactnative
样式
HTML5-reactnative

样式继承,两个Text可以嵌套,下面的划线的文本内容又加粗又是红颜色
HTML5-reactnative

图片—必须引入Image,uri后跟图片路径
HTML5-reactnative
HTML5-reactnative
HTML5-reactnative
HTML5-reactnative

Flexbox
HTML5-reactnative
HTML5-reactnative
HTML5-reactnative
HTML5-reactnative

flexDirection:默认是column
HTML5-reactnative
flexWrap:’wrap’ 当一行排不下时换行排列 ‘wrap-reverse’
HTML5-reactnative
flexFlow
HTML5-reactnative
HTML5-reactnative
justifyContent:控制主轴对齐方式
三者要一起使用
HTML5-reactnative
HTML5-reactnative
HTML5-reactnative
alignItems: 控制次轴对齐方式
HTML5-reactnative
当flexDirection是row时
HTML5-reactnative
alginSelf:控制自己对齐方式
HTML5-reactnative
HTML5-reactnative
HTML5-reactnative

放大,缩小等

Align-content只支持网页版 在手机上不发生作用
HTML5-reactnative
HTML5-reactnative
HTML5-reactnative
flex:num,分配主轴方向的比重,占几份
HTML5-reactnative

组件化
HTML5-reactnative
文本组件—Text
HTML5-reactnative

按钮Button是不存在的,而是如下TouchableOpacity
HTML5-reactnative
点击之后按钮的颜色会变浅
也可以用TouchableHightlight
HTML5-reactnative
HTML5-reactnative
underlayColor是点击之后变颜色,onPress是点击之后有弹窗
Click方法是弹出一个小窗
HTML5-reactnative

对按钮设置成一个组件,就可以被多次复用
先在js中封装按钮,如下
HTML5-reactnative

然后在android.js中引入组件,并写上标签
HTML5-reactnative

子父组件之间的数据传递
在android.js中写
HTML5-reactnative
在button.js中写
HTML5-reactnative

怎么构建自己的自定义组件
file—setting—-

State的用法—-(重要)
在构造器里初始化state—–引用state—-setstate重新设置值

HTML5-reactnative
HTML5-reactnative
文本框
HTML5-reactnative
HTML5-reactnative

双向数据绑定用onchangeText,state来实现
HTML5-reactnative

HTML5-reactnative