1. React Native

1.0.1. 环境搭建

Python 2.7
Java SDK（1.8+）
Android SDK
- 设置
  - Tools/Android SDK Tools
  - Tools/Android SDK Platform-tools
  - Tools/Android SDK Build-tools (23.0.1)（这个必须版本严格匹配23.0.1）
  - Android 6.0 (API 23)/SDK Platform (1)
  - Extras/Android Support Library
  - Extras/Android Support Repository

Node.js
- 镜像切换模块npm install -g nrm
- 查看当前镜像nrm list
- 切换镜像nrm use taobao
- 测速nrm test
React-Native命令行工具npm i -g react-native-cli

1.0.2. Hello Word

创建项目react-native init MyHelloWord
PS：等待数（或数十）分钟
运行packagerreact-native start
PS：可以用浏览器访问http://localhost:8081/index.bundle?platform=android看看是否可以看到打包后的脚本（看到很长的js代码就对了）
运行模拟器
- 推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。
  如果有真机，可以不必运行模拟器，要配置好驱动，使得adb devices可以看到对应的设备。
- Android Virsual Device
  1
  D:\Android\sdk\tools\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_19
  D:\Android\sdkAndroid Studio 目录
  Nexus_5X_API_19是我的模拟器的名称，具体名称，可以打开android studio查看
Android 运行react-native run-android
保持packager开启，另外打开一个命令行窗口，然后在工程目录下运行

1.0.3. 设备测试

摄像头react-native-camera

npm install react-native-camera
react-native link react-native-camera

添加权限

android,路径android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
<uses-permission android:name="android.permission.VIBRATE" />

iOS,待续

修改部分

android/build.gradle

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.3'
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        google()
        maven {
          url "$rootDir/../node_modules/react-native/android"
        }
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
        google()
    }
}

android/gradle/wrapper/gradle-wrapper.properties

1 2	... distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

android/app/src/build.gradle

dependencies {
    ...
    compile (project(':react-native-camera')) {
        exclude group: "com.android.support", module: 'support-v4'
    }
    compile('com.google.android.gms:play-services-vision:10.2.0') {
        force = true
    }
}

1、以上步骤后，尝试构建项目react-native run-android
2、使用Android Studio打开android，构建项目，根据提示解决错误，但警告是由于android api造成异常，等android解决后修复
3、最后添加使用相机的代码

WebView

根据该篇文章进行测试

1.0.4. 问题

Andriod SDK 设置要花很长时间
Android SDK Build-tools 必须包含（23.0.1）
Unable to resolve module some-module from /Users/username/projectname/AwesomeProject/index.js: Invalid directory /Users/node_modules/some-module根据Git方法解决

1.0.5. 整合ios，android，web（编外）

react-web，淘宝前端团队开发的一个可以把react-native转换成web的工具, 大体上能实现了移动端的iOS/安卓/移动web这三端的代码共用
react-native-web，twitter维护，使用webpack的灵活配置，实现了**.web.js和Platform.OS==='web'这样的平台代码，实现三端代码共用
react-web依赖于react-native-web实现，在github中README.md文件有注明，但是react-native-web目前版本是 0.8.0，而react-web版本已经更新 1.1.3，不过react-web只在中国正式在生成环境运行中。
各种平台存在自己的差异性，不能完全兼容
该要改的还是要改，该要重写的还是要重写

React-native 学习

1. React Native

1.0.1. 环境搭建

1.0.2. Hello Word

1.0.3. 设备测试

1.0.4. 问题

1.0.5. 整合ios，android，web（编外）

1.0.6. End