React-native Android windows环境配置与真机实连

React-native环境配置

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。

作为刚开始学习的小白 只是想分析一下 我安装环境以及真机调试的过程。

我的电脑是windows系统的 Mac的我不太了解 ps:主要是穷 还买不起apple 。哈哈，言归正传

1.   安装python环境

 可以去官网上下载   附上下载地址：https://www.python.org/ 

有两种版本一种是3.6.1和2.7.13 我用的是Python2.7.13

等你下载结束后 把下载好的python文件的地址复制好 然后右键点击我的电脑 => 属性 => 高级系统设置 => 环境变量  把你复制好的python文件的地址付给Path。然后保存

保存完以后 windows+R 打开出cmd 输入python 出现以下提示后 就成功安装了

2.安装Node.Js

可以去官网上下载最新的Node.Js 附上下载地址：https://nodejs.org/en/download/

步骤1：点击next

步骤2：点击 I accept the terms in the License Agreement 对话框 意为接受

步骤3： Node.js 默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录，并点击 next（下一步）

步骤4：点击树形图标来选择你需要的安装模式  选最后一个 直接加到环境配置里, 然后点击下一步 next

步骤5：点击 Install（安装） 开始安装Node.js

最后还是windows+r 打开cmd 验证是否安装成功 输入node -v

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）

可以使用淘宝镜像 ： 

npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global

3.安装Java

去Java官网上下载 Java SE Development Kit 7 版本不能太低 把下载好的java文件中的bin文件的地址赋给path

4.安装Android Studio

在安装之前一定要配置好java环境 我下的是sdk 直接在Android studio包里的 所以没有单独配置sdk

当你第一次打开android studio 时会报出 需要你更新的警告弹窗 不用理会 

设置sdk 以及 android studio的路径

这样React-native环境配置完毕。

真机连接

之前用android studio 连react-native 真的是错误百出 各种坑踩个遍 想起来那句话 react-native 从入门到放弃 哈哈。

后来在这个网址：https://facebook.github.io/react-native/docs/getting-started.html 上无意发现一款软件 expo XDE 。真的这个软件比android studio好用很多 。

下面 开始 先创建一个raect-native项目

步骤1：

create-react-native-app

步骤2：npm install-g create-react-native-app

                        

这个安装过程会很缓慢 取决于个人网速 有时候可能会卡 可以重新再来一遍

Then run the following commands to create a new React Native project called "AwesomeProject":

create-react-native-app AwesomeProjectcd AwesomeProjectnpm start

This will start a development server for you, and print a QR code in your terminal.

演示一下 我得项目运行 

1、我先进入我创建的文件夹

     2、 进入项目后 输入npm start

                  

到最后有一个很有意思的地方 

出现了一个二维码 第一次见时 感觉很有意思 这时手机可以下载一个 Expo client 

用Scan QR code扫描二维码 进行把项目传入到手机 在有网的环境下进行

成功后会显示出你项目的信息 当你准备更新代码时

用你的编译软件对这个app.js进行 更新 在晃晃手机进行Reload 更新渲染