reactnative—需要在官网上学习
用react库开发一些移动端应用是reactnative
一般dom的更新都是对整个dom树的更新
React框架对dom 的操作可以减少对dom树的更新。先找虚拟的dom,再在页面上对相应的节点更新,不是对整个dom树的更新。
React.js开发网页小例子
在html中引入js文件
Html文件
js文件新写法
js文件旧写法(不推荐使用)
注意:标签一定要和return在一行
Jsx就是javascriptxml,就是可以在js中写html,要转化语法,从es6转换为jsx
Reactnative开发app小例子
要引入相应的库,除了react基础库外,还有react-native的库
样式变的构建与引入如上图
最后要注册,第一个是项目的名称,必须与init 的项目名称一致,第二个是class后的名字。
View——-可以嵌套
纵向一定要设置flex:1
样式
样式继承,两个Text可以嵌套,下面的划线的文本内容又加粗又是红颜色
图片—必须引入Image,uri后跟图片路径
Flexbox
flexDirection:默认是column
flexWrap:’wrap’ 当一行排不下时换行排列 ‘wrap-reverse’
flexFlow
justifyContent:控制主轴对齐方式
三者要一起使用
alignItems: 控制次轴对齐方式
当flexDirection是row时
alginSelf:控制自己对齐方式
放大,缩小等
Align-content只支持网页版 在手机上不发生作用
flex:num,分配主轴方向的比重,占几份
组件化
文本组件—Text
按钮Button是不存在的,而是如下TouchableOpacity
点击之后按钮的颜色会变浅
也可以用TouchableHightlight
underlayColor是点击之后变颜色,onPress是点击之后有弹窗
Click方法是弹出一个小窗
对按钮设置成一个组件,就可以被多次复用
先在js中封装按钮,如下
然后在android.js中引入组件,并写上标签
子父组件之间的数据传递
在android.js中写
在button.js中写
怎么构建自己的自定义组件
file—setting—-
State的用法—-(重要)
在构造器里初始化state—–引用state—-setstate重新设置值
文本框
双向数据绑定用onchangeText,state来实现