react native
参考自rn中文官网的官方教学,不过说实话个人觉得这个教学讲的不细,很多地方交代的不是很清楚,或者说比较浅,也可能是本人刚刚入坑,对很多问题都不是很理解~,入坑rn之前,也多看看ES6
react native框架原理
image
image
- JS的view组件通过react native的机制翻译成原生的view组件
- 不是使用浏览器作为翻译的手段，而是使用自己的一套原生桥接的api
- react的核心就是虚拟dom，通过虚拟dom与真实dom比对，完成不一样位置的局部刷新，而不是整体渲染
- rn注意理解组件生命周期和组件通信的概念
项目结构
- android/ios的原生目录
- babel转码器
- buckconfig android的编译工具
- flowconfig 为js做检查（因为js是弱语言）
- watchmanconfig 系统检测文件变化
- yarn.lock替代npm 类似gradlew做兼容的
- index.js入口函数
- src js代码
- eslintrc 支持插件的Javascript和JSX的代码检测工具
分包可以
组件-页面-工具-业务
8081端口被占用问题
- netstat -ano | find "8081"
- taskkill /F -pid 6596
rn坑
- 需要已管理员身份init项目，不然可能有很多问题
- 可以用studio中local.gradle来表明sdk路径
- package.json配置
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.3"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
flexbox
<a href = "http://www.runoob.com/w3cnote/flex-grammar.html">菜鸟教程</a>
flexbox的基本属性 （主轴x次轴y）
- flex-direction 主轴排列方向
- flex-wrap 如果一条轴线排不下，如何换行（注意需要根据主轴方向）
- flex-flow 是上面两个属性的简写形式
- justify-content 主轴上的对齐方式。左对齐
- align-items 次轴上的对齐方式。左对齐
redux数据流
为了解决mvc的v与m交互的问题，flux定义了一种模式，不允许view向store传递信息，单向数据流
store -- view -- action
dispather - store -- view -- action - 返回dispathcer
store -- view -- action
是flux的一种实现，但与flux不同
image
- store 存储state，初始化reducer
- reducer更新store
- 用户或其它逻辑触发action，action触发reducers
- state改变更新UI
组件的生命周期
life.jpg
react native
rn好处是已经较为成熟，社区活跃，但新特性，控件更新还是慢，而且ios禁止热更新，rn其实还是多个平台多套代码，出现的意义是混合开发，减少双端代码量，而不是真正的统一开发，多端运行，可以简单的把rn看作一套UI框架，reac上手对原生人员不是很友好
- 而week发展还是较慢，没有rn成熟，但week的口号是一次编译到处运行，三端适配，至少在定位上比rn更超前，week上手简单，待验证，相对rn，更看好以后的week
