RN学习一

RN学习

• 配置环境,android studio等下载,webstrom下载

原理:

通过JS代码以及facebook的内部库将代码转化为类似于原生的View等控件,所以并不存在性能很差等问题.

基础组件学习

直接去网站看文档学习:https://reactnative.cn/docs/getting-started/

ReactNative模拟器快捷键:

刷新:iOS模拟器 cmd+R 安卓是 双 R(连续按两次R)
调试:iOS模拟器 cmd+D进入调试菜单模式 安卓是cmd+M
cmd + 空格直接进入app搜索快捷键
cmd + .折叠代码

查看RN当前版本号:

react-native --version 或者直接查看项目内package.json
npm:node包的管理者
npm info react-native(查看当前版本)
npm install --save react-native@'0.57.0'(更换版本)

一些名词和注意点

Component
render()函数
Platform,//注册
StyleSheet,//样式
Text,//文本组件
View,//视图组件
Image//新增的图片组件
flex//flex布局设置比例是多少
flexDirection//主轴方向
marginTop//外边距
justifyContent//主轴对齐方式
alignItems//侧轴对齐方式
borderBottomColor,borderWidth//边框颜色和宽度
Dimensions:width,height,scale.//获取屏幕宽高的库
value,placeHolder//值和占位文字
multiline = {true}//textInput是否换行显示
module.exports = LoginView;//输出类

var loginView = require('./loginView');(会报错,必须使用LoginView)注意自定义控件标签需要使用大写获取变量使用小写会报错

flex-box布局

针对web和移动开发所做出的布局方式:
https://www.cnblogs.com/myzhibie/p/4318904.html

主轴:决定子控件的排布方向(默认是从上自下)
侧轴:默认子控件顶在主轴和侧轴的起点(默认是从左自右)

代码:

//flexDirection改变主轴方法
flexDirection:'row','column(默认)',web还有两个方法
//justifyContent主轴对齐方式
justifyContent:'flex-start(默认)','center(居中)','space-between(平均分配间距)','space-around(平均分配)','flex-end(末尾)'.
//alignItems侧轴对齐方式
alignItems:'flex-start(开始)','flex-end(末尾)','center(中心)','stretch(默认值)',stretch:如果没有设置高度或者设置aotu就占满.有高度和start一样.
//flexWrap换行
flexWrap:'wrap'.显示不下就换行默认不换行'nowrap'.如果侧轴对齐就无效变成默认值
//flex占用父盒子主轴方向的比例
flex:值多少随意,但是子盒子的值按比例分配大小
//alignSelf:flex-start(开始)单独布局覆盖父标签布局,下单个子控件侧轴的对齐方式().