RN解决的问题
设计理念:使用React Native开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率(TODO:开发效率莫非很高?)。其提供的解决方案可以称为“一次学习,随处编写(Learn once,write anywhere)”
重要特性与强项
1.一次学习,随处编写(开发思路相同,不同平台上的代码根据平台会有微小的区别,)
2.混合开发
- UI与业务逻辑由React Native开发,与手机平台紧密关联的处理由原生执行
- 可将UI控件包装为RN自定义组件
- RN界面与原生界面能自由切换
3.独特的UI实现框架,使用React开发,开发者只需关心数据,当数据改变时,只需通知React数据变了,由React来实现UI界面的改变(状态机变量与属性)
4.组件化开发
5.跨平台移植代码迅速(需要适配部分的代码只有总代码的5%甚至更低)
6.通过灵活的布局方式,适配不同屏幕大小的手机
7.高效的开发调试(做出改动不用重编译,可以立刻看到效果)
8.hotfix方便
9.包体积有效降低
10.开发语言简单(ES6,JSX),接近自然语言(和OC命名风格差不多)
11.积木式UI
代价
1.内存消耗大
2.在最优条件下运行速度比原生代码慢,菜鸡来开发,RN甚至有优势
开发环境搭建
1.版本号的知识,递增规则如下以0.41为例(主版本号.次版本号)
- xcode安装
- brew install node
- brew install watchman
- npm install -g
2.IDEA选择:atom+nuclide/vscode
3.TODO:React Dev Tools安装(已完成)
状态机思维与状态机变量
1.react-native init LearnRN 初始化项目
2.模拟重启,在项目根目录输入命令react-native start
3.RN生命周期函数中使用console.log打印日志非常容易引发问题(红屏)
4.cmd+d唤出development,点击remote JS Debugging按钮,在启动的chrome界面按下cmd+opt+j即可调出调试界面(前提是chrome安装了React Dev Tools插件)
5.JSX注释不能用//进行代码注释,需要以{/开头,以/}结束,并且中间注释的文字可以跨行。
6.状态机变量为不可变常量,不要出现“this.
state,某状态机变量名 = 某值”,当开发者需要改变状态机变量时,应使用this.setState函数。
7.尽量减少有状态的RN组件的数目,可以让状态机变量放在合理的地方,减少代码冗余,使程序框架清晰
8.好的RN设计思路:创建多个负责渲染数据的无状态组件,将其封装在有状态的RN组件中,并把这个有状态的RN组件的状态机变量值通过props传给无状态RN组件,使无状态RN组件成为有状态RN组件的子组件
组件回调函数的绑定
1.使用箭头函数指向回调,如:
onChangeText = {(newText) => this.updateNum(newText)};
2.回调函数使用箭头函数定义,如:1
2
3
4
5
6updateNum = (newText)=> {
this.setState((state)=>{
return{ inputedNum:newText,
};
});
}
3.先在构造函数中绑定updatePW函数:
this.updatePW=this.updatePW.bind(this)
随后在render中直接使用onChangeText={this.updatePW}
组件平台自适配
1.将文件名改为XXX.ios.js
2.使用RN提供的Platform API判断,如下:
if(Platform.OS == “android”)
遇到的问题
1.修改代码要保存后cmd+R刷新显示
2.在text中引用变量使用{变量}而不是(变量)
3.代码补全需要先引库
4.书中第三章使用的导航组件为Navigator,在demo中使用发现没有对应的sceneConfigs等属性,咨询了一下RN的同学发现两年前就已经弃用了这个组件,现在重点看的学习资料转向https://reactnative.cn/docs/getting-started/ 官网的教程了,以书为辅
5.今日RN开发踩到一个坑,根据官方文档的指引,添加导航库yarn add react-navigation
后,运行代码报错Module `react-navigation` does not exist in the Haste module map
解决方法,关闭RN项目自启的命令行,切断桥接,重新运行项目