RN入坑

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

菜鸟教程

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

rn项目地址https://github.com/Johncuiqiang/RN---