reactnative 入门与基础

笔记来源于慕课网 https://www.imooc.com/learn/808
https://github.com/facebook/react-native.git     官方开源代码，只是react-antive 的源码，任何人都可以提交（request），官方会审核每个人的requset，审核通过会成为react-native 的贡献者（其实其他的项目也是这样，比如angular，bootstrap，开源的都是这），之前有官方的example 的，现在找不到了，但是可以通过切换分支或者是版本来找到。

https://github.com/crazycodeboy/RNStudyNotes/        贾鹏辉的rn笔记（这个 慕课网视频也是他录的）

rn和react的区别：

1.react 开发web，rn开发跨平台appp
2.技术角度讲：react 要写html，不完全是组件化，可以从render看出来,react 的react（组件名，要插入的节点），rn完全组件化

ADB，即 Android Debug Bridge，它是 Android 开发/测试人员不可替代的强大工具，也是 Android 设备玩家的好玩具

第一章 敲开React Native的大门

1. 初识react native
   
   
   
   
2. 开发环境搭建-windows（https://reactnative.cn/docs/getting-started/）
   https://reactnative.cn/docs/getting-started/  这是官网的环境搭建，更为详细，要注意（1.版本问题  2.下面3个是基于android 开发环境搭建好后）
   1. node.js   (nvm  node.js 的版本管理工具，nrm 注册源的管理工具)
   2.

   安装react-native命令行工具

   npm install -g react-native-cli

   3. 编辑器
   4.初始化项目
    
   5.运行项目（从下面的截图文字可以看出来，两种打开方式一种是命令行，另外一种是编辑器）
   
   如果gemotion 报错cpu 不兼容，这时候要做两步
   1. 因为说的是cpu ，要把微软的hyper-v （虚拟化）功能去掉   https://www.zhihu.com/question/38841757?from=profile_question_card
   
   2. 把cpu 的虚拟化打开（我的电脑 是windows  aoc ）
   报错：500  注意500 下面的内容也很多，要看清是哪一种
   https://github.com/react-community/create-react-native-app/issues/721
   报错：error react-native@0.57.2: The engine "node" is incompatible with this module. Expected version ">=8.3".
   看出 react-native的版本和node的版本不是太匹配，要么降低react-native的版本，要么提升node 的版本，但是提升node的版本其他的项目又不行了，所以建议降低react-native的版本。node 推荐使用6点几的版本
   解决方法：react-native init demo --verbose --version 0.55.4 
   参考链接https://blog.csdn.net/klo220/article/details/81391949
   6. 项目结构
   
   
   
3. 开发工具的选择
   webstorm  （但是也需要下载xcode或者Android studio，因为需要编译环境）
4. 构建官方的example-windows
    如果最新的版本没有example，可以试着切换分支
5. 构建官方的example-mac

第二章 React Native 基础

1. 组件
   
   
   
   
   
2. 组件的生命周期
   
   
3. 项目的导入与导出
   
   组件的导入导出上面说了
   变量和常量的导入和导出
   
   
   方法的导入和导出和变量 一样
   
   
    
4. props 使用详解
   
   1.props 是一个组件的属性，是父组件传递给子组件的
   2.使用
   
   
   
   3. 默认属性
   
   4. props 检查和约束
   5. 延展操作符
   
5. state 使用详解
   props 是无法改变的，值只读的，只能父组件传递过来，或者是默认props
   为了实现交互我们需要用state 改更改页面
   
   1. state  是一个状态，当状态改变就跟新视图
   2. 如何使用
   
   3.打气球
   
6. ref 使用详解
   rn 中的组件并不是真的dom 节点，是存在内存中的一种数据结构，叫做虚拟dom，是组件的实例。只有当render后才会在页面中成为真正的dom。根据rn 的设计，所有的变化都会发生在虚拟dom上，只有实际发生变动的部分才会发生在真正的dom 上，这就是dom diff ，可以提供页面性能。
   1.什么是ref
       ref 是组件的一种特殊的属性，通过ref 可以拿到组件的引用，相当于angular 的#名字 模板引用变量
   2. 如何使用
   
   或者是这样使用
   
7. 相见恨晚-在rn开发中类的使用
   类的使用
   
   类的继承
   
8. es6 和es5 在rn中的不同
   http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B-(%E4%B8%8B)/
9. rn 布局知识详解
   rn flexbox  贾鹏辉
   http://www.devio.org/2016/08/01/Reac-Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/   
   这个文档的alignitem 图示有错误。
   
   css3 flexbox  阮一峰
   http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
   
   微博 简图
   https://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment#_rnd1539242711198

         注意：在rn 中在React Native中尺寸是没有单位的，它代表了设备独立像素。


如果要平分大小可以给子元素设置 flex 的权重相等，比如都1，默认都是0；直接给子元素写就可以了，父元素得有宽度
https://reactnative.cn/docs/height-and-width/

第三章 React Native 进阶

1. 按钮使用详解
   http://www.devio.org/2017/01/10/React-Native%E6%8C%89%E9%92%AE%E8%AF%A6%E8%A7%A3-Touchable%E7%B3%BB%E5%88%97%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E8%AF%A6%E8%A7%A3/
2. 图片使用详解
   
   1. 静态图片
   
   2.网络图片一定要置顶宽高（注意一定要设置宽高）
   
   3. 原生图片（注意一定要设置宽高）原生就是android文件夹。里面使用原生的android写的，如果想用原生android里面的图片
   
   4.本地文件系统中的资源|
   
   5. 图片使用技巧（不同分辨率的图片）当app 运行在不同分辨率的时候，会用不同的图片，写的时候写标准的图片。
   
   不同分辨率
   
3. 项目调试技巧
   windows android  ctrl+m  虚拟机  双机rr 刷新或者是ctrl+m 然后reload  最快速是启动动态加载（enable live reload）或者是（enable hot reload）启动热加载
   真机  摇动手机
   
   热加载和动态加载的区别是：
   1.动态加载是全部更新，而是会返回到主页。
   2.热加载是局部更新更快，还是当前页面。
   
   远程调试 （debug  js remotely），会自动打开一个chrome浏览器，然后手动打开开发者工具（只能调试js代码）如果调试native android 用android studio编辑器
   
   
   
   真机的调试（windows android）
   前提条件（真机和电脑处于同一局域网内，连接同一wifi）
   1.摇晃手机打开dev setting
   2.点击debug server host（输入电脑的ip 的package 服务器的端口号）