2018-09-09-0-15
----------------有时候差之毫厘谬以千里，比如刚刚发布的文章是9-8-11:58左右，而现在已经是第二天（9-9-0-15）了。失去的东西会有遗憾，但是再也回不来了，而你所见的永远也没有曾经的那么好，陪伴我的只有代码.......
步骤如下（window系统）：
1，先下载安装好node,（安装的时候npm（node包管理工具）会自动安装）
2，npm install -g yarn [email protected] ////安装好react-native-cli，这里要带上版本号1.2.0
//安装完 yarn 后同理也要设置镜像源：
3,yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
4,npm install -g yarn [email protected] // 指定安装0.55.4版本的react-native
5,react-native init --version="0.55.4" myprojectname（AwesomeProject）//创建版本号为 0.55.4版本的项目
6，cd myprojectname
7,在as上打开你的myprojectname文件夹下的android项目，配置好版本，并build project,
8，连接好手机，执行命令：react-native run-android //运行项目，
这里提示为什么刚才要带上版本号，2018年9月9号0:31分，这段时间最新的react-native的版本号是0.56.0，react-native-cli是2.1.0，不带版本号的话默认的生成的就是这个版本号，但是，这个版本号开发Android的时候有bug，最终会报Access...info的错误,最后你还是要卸载，然后安装
一般不知道版本号时的流程：
1，npm install -g yarn react-native-cli,
2，yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
3，react-native init AwesomeProject //创建AwesomeProject 项目
4，cd AwesomeProject //进入AwesomeProject 文件夹
5, react-native run-android //运行android项目
6,出错
7，npm uninstall -g react-native-cli //卸载 react-native
8，npm install yarn [email protected]（稳定版本）或者0.59.8
9，npm install -g yarn [email protected]
10，react-native init --version="0.55.4" myprojectname（AwesomeProject）//创建版本号位0.55.4版本的项目
react-native init --version="0.59.8" myprojectname（AwesomeProject）//创建版本号位0.59.8版本的项目
11，cd myprojectname
12，在as上配置好版本，并build project
13，,react-native run-android //运行项目，
以后创建react-native项目从第10步到第13步就行了；
2018年9月9日
袁镇
yarn add [email protected]
react-native link react-native-gesture-handler
react-native自带的PanResponder手势监视器由JS响应器系统控制而react-native-gesture-handler是在UI线程中识别和跟踪手势。 若使用RN官方提供的手势管理在与发生在主线程上的触摸交互(如iOS滑块或任何滚动视图)时，经常会遇到问题。==由于主线程必须同步决定JS或滚动视图是否应该成为响应器，而JS只能异步响应并不能立即拒绝Native事件的响应，导致手势操作被这些Native组件劫持。== ps: 上面提到的JS不能立即拒绝Native事件的响应对应PanResponder中的onPanResponderTerminationRequest方法，当该方法返回false时表示拒绝其他组件响应当前的手势。
npm install [email protected] --save
react-native link react-native-fs
将文本写入本地 txt 读取txt文件内容 在已有的txt上添加新的文本 删除文件 下载文件(图片、文件、视频、音频) 上传文件 only iOS
yarn add @react-native-community/[email protected]
react-native link @react-native-community/async-storage react-native
本地文件
存储数据 storeData = async () => { try { await AsyncStorage.setItem('@storage_Key', 'stored value') } catch (e) { // saving error } }
读取数据 getData = async () => { try { const value = await AsyncStorage.getItem('@storage_Key') if(value !== null) { // value previously stored } } catch(e) { // error reading value } }
npm install [email protected] --save
react-native link react-native-picker react-native
调用本地相机功能
yarn add @react-native-community/[email protected]
react-native link @react-native-community/async-storage
npm install [email protected]
react-native link react-native-view-shot
1,可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View组件。支持iOS和安卓。 1,需要将分享页生成图片，并分享到微信好友与朋友圈。
yarn add [email protected]
react-native link react-native-image-picker
用图片选择器react-native-image-picker拍照、选照片 发布：2018/3/7 有时我们程序中需要提供用户上传照片的功能。照片可以从设备相册中选择，也可以使用摄像头直接拍摄。这个功能使用 react-native-image-picker 库就可以很方便的实现。
**npm与yarn对比**
Yarn的优点？• 速度快 。速度快主要来自以下两个方面：1.并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。2.离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。•安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages，但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件，在执行 npm install 的时候，该锁定文件会先被读取，和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于，Yarn 默认会生成这样的锁定文件，而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有当这个文件存在的时候，packages 版本信息才会被记录和更新。• 更简洁的输出：npm 的输出信息比较冗长。在执行 npm install的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。 • 多注册来源处理：所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。 • 更好的语义化： yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比 npm 原本的 install/uninstall 要更清晰
**npm的未来**：
npm5.0 有了yarn的压力之后，npm做了一些类似的改进。 1.默认新增了类似yarn.lock的 package-lock.json； 2.git 依赖支持优化：这个特性在需要安装大量内部项目（例如在没有自建源的内网开发），或需要使用某些依赖的未发布版本时很有用。在这之前可能需要使用指定 commit_id 的方式来控制版本。 3.文件依赖优化：在之前的版本，如果将本地目录作为依赖来安装，将会把文件目录作为副本拷贝到 node_modules 中。而在 npm5 中，将改为使用创建 symlinks 的方式来实现（使用本地 tarball 包除外），而不再执行文件拷贝。这将会提升安装速度。目前yarn还不支持。 总结 在npm5.0之前，yarn的优势特别明显。但是在npm之后，通过以上一系列对比，我们可以看到 npm5 在速度和使用上确实有了很大提升，值得尝试，不过还没有超过yarn。 综上我个人的建议是如果你已经在个人项目上使用 yarn，并且没有遇到更多问题，目前完全可以继续使用。但如果有兼容 npm 的场景，或者身处在使用 npm，cnpm，tnpm 的团队，以及还没有切到 yarn 的项目，那现在就可以试一试 npm5 了。
Yarn和npm命令对比
npm yarn
npm install yarn
npm install react --save yarn add react
npm uninstall react --save yarn remove react
npm install react --save-dev yarn add react --dev
npm update --save yarn upgrade
npm版本的安装：
npm install [email protected]
npm install [email protected] --save
react-native link react-native-view-shot
npm install [email protected] --save
react-native link react-native-fs
npm install [email protected] --save
react-native link react-native-gesture-handler
npm install @react-native-community/[email protected] --save
react-native link @react-native-community/async-storage
npm install [email protected] --save
react-native link react-native-image-picker
npm install [email protected] --save
react-native link react-native-picker
npm install [email protected] --save
react-native link react-native-splash-screen
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]