Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

windows下构建我们的第一个React Native应用程序,主要分二个思路!

1无需安装或配置任何工具来构建React Native应用程序。(如果你只是想简单了解学习react-native)

2需要安装配置对应的依赖工具来够构建我们的React Native应用程序。(如果你想为iOS和Android开发app建议选后者


思路一:无需安装其他依赖软件工具

1:安装nodejs,注意nodejs版本号要>=6,npm版本号要<5。(这个在官网上并未提及,不过我在安装了最新版本nodejs后才提示报错得知)!
2:(用npm)安装create-react-native-app命令行工具

npm install -g create-react-native-app


3:通过create-react-native-app命令行工具创建你的第一个应用程序,我们就叫它"HelloWorld"吧!

create-react-native-app HelloWorld


4:进入您刚刚创建的HelloWorld项目并运行它

cd HelloWorld
npm start

结果:这样我们就顺利创建好了HelloWorld项目并同时开启了其开发服务器,等一会终端就会为我们输出一个QR码(二维码),注意这个要等一会哦。
然后就可以用你的手机扫码测试查看我们创建的项目了。这是不是超级简单了。
推荐原官网文档:http://facebook.github.io/react-native/docs/getting-started.html#caveats




思路二:需要安装配置相应的依赖工具

(好吧,这个才是重点!就此在windows下要运行此埋下的坑也千奇百怪,特么多!宝宝费了好大力气才一一个别排除!后边会对这些问题笔记,希望对大家都有帮助吧!)

总共需要的依赖工具软件:
1:JDK安装配置环境(JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+Java系统类库)和JAVA工具。)
2:nodejs安装配置环境
3:react-native 命令工具行
4:Android-studio (安卓集成开发工具,用于Android开发调试)
5:python2安装配置环境
6:node-gyp(选装)
7: Visual C++ 2015 Build Tools(选装,这个能不装就不装!)
6、7两个选装,根据您装完前5项后创建运行react-native项目出错与否来决定你是否要安装6、7!?后边会具体笔记!好吧,先来看看前面5个怎么弄吧!


思路二之步骤(一):JDK安装以及其环境变量配置

1:准备工作
从Oracle官网下载Java JDK安装包(版本自己决定,我用的是9.0.1)。

2:傻瓜式安装
记住您选择安装的盘路径,这里我安装到的是E:\Java。这个一定要记住,因为紧接着后边的环境配置变量要用到!

3:环境变量配置
我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统变量

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

A:新建 
变量名:JAVA_HOME 

变量值:E:\Java\jdk这个根据你之前傻瓜式安装JDK选择的安装路径来决定,我安装在的是E:\Java\jdk 

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

B:找到系统变量下的Path,双击打开

新建%JAVA_HOME%\bin

新建%JAVA_HOME%\jre\bin

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

思路二之步骤(二):Nodejs安装
下载安装,傻瓜式,很简单!这里就不再赘述。
只说明下,nodejs版本过高和过低都会出各种奇葩的bug,所以我选择了一个比较适中的版本nodejs v6.9.0
下载地址:https://nodejs.org/zh-cn/download/releases/

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

思路二之步骤(三):react-native 命令行工具安装

nodejs自带npm,用npm安装React-native命令行工具
在命令提示符或外壳程序nodejs中运行一下命令:

npm install -g react-native-cli

如果你得到一个错误Cannot find module 'npmlog',请直接尝试安装npm curl -0 -L https://npmjs.org/install.sh | sudo sh

思路二之步骤(四):Android-studio安装以及其环境变量配置
1:下载安装Android-studio,选择自定义模式,以下选项全部勾选。

● Android SDK
● Android SDK Platform
● performance (Intel ®HAXM)
● Android Virtual Device

然后单击下一步完成所有选项!

2:安装Android SDK

在安装Andriod studio的时候默认安装的是Android SDK的最新版本,但是我们React-native 应用程序需要的是
Android SDK 6.0 (Marshmallow) 特别的SDK
这一步我们通过Andriod-studio里的SDK Manager安装,其他Androd SDK也可以通过他来完成安装!

(2-1):找到 SDK Manager 在哪里?
初始andriod studio -> 右下角 configure -> SDK Manager

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

其他方法:也可以在Android Studio的"首选项"对话框里找到
外观和行为 -> 系统设置 -> Andriod SDK

(2-2):从SDK Manager下选择"SDK Platforms"选项卡,然后选中右下角的"Show Package Details"旁边的复选框,找到Android 6.0(Marshmallow)条目并展开,选择如下内容:

● Google APIS
● Android SDK Platform 23
● Intel x86 Atom_64 System Image
● Google APIS Intel x86 Atom_64 System Image

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

(2-3):接着选择"SDK Tools"选项卡,并选中"Show Package Details"旁边的复选框。查找并展开“Android SDK Build-Tools”条目,然后确保23.0.1已选中。

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

(2-4):点击"Apply"下载!

3:为Android stuido配置环境
这一步和JDK环境配置差不多,只是内容略有不同!原理是一样的!
我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统变量

不想啰嗦了,直接上图吧!

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

如果你不知道你的Aandroid SDK的路径在哪里,我们可以通过Android Studio"首选项"对话框的
外观和行为 -> 系统设置 -> Android SDK 下找到SDK的实际位置。
最后在进行下一步之前重启下你的命令提示符,以便新的配置环境得以重新加载!


思路二之步骤(五):python2安装以及其环境变量配置
我装的是python v2.7
具体安装步骤很简单就不再赘述,这里只上图说明下环境配置!

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)
然后不要忘记在系统变量Path中添加上您的python所在安装路径。

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

好了,前面四步已经完成,事实上如果不出其他bug您就可以通过您的react-native命令行工具创建并运行你的第一react-native项目了!
创建myApp项目并为其开启服务器,代码如下:

react-native init myApp

cd myApp

npm start

以上五步完成!
事实证明宝宝并没有这么好运,出bug了,远远没有这么简单!下边我对我遇到的问题进行一下梳理和解决!

问题一:

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)

1.具体原因:

  项目依赖中,node-gyp调用MSBuild工具进行组件编译,找不到MSBuild2.0,而系统里只有MSBuild4.0。

2:解决办法:

(1):下载Visual C++ 2015 Build Tool, 安装时,选择自定义安装,勾选您8.1windows SDKs,直接安装完毕!

下载地址:http://landinghub.visualstudio.com/visual-cpp-build-tools

(2):npm config set msvs_version 2015 --global

参考其他解决方案连接:https://github.com/nodejs/node-gyp/issues/629#issuecomment-153196245

问题二:(这个一般都会出现)


在真机或模拟机运行myApp项目时报错

报错内容:unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

事实上这是因为你的项目中缺少了index.android.bundle和 index.android.bundle.meta两个文件

解决办法:

第一步:在你创建的项目(我创建的是myApp)中找到Android/app/src/main目录下创建一个空的assets文件夹。

第二步:使用命令提示符中进行入你创建的项目,然后执行以下命令。

旧版本
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 

新版本
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ 

这个主要取决你新建的react-native项目中是否有android.index.js和ios.index.js,
注意新版本中式没有的,只有一个index.js。所以你知道区别在哪里了吧!

运行完毕后assets文件夹下会多出index.android.bundle和index.android.bundle.meta两
个文件夹


第三步:重新运行程序完美解决!

推荐参考:http://blog.csdn.net/sinat_34380438/article/details/77648476?locationNum=9&fps=1

问题三:(这个必须操作哦!不然模拟机无法运行哦!)
Intel virtualization technology(vt, vt-x) is not enabled
PC端模拟机测试时需要开启系统 Intel vt-x

解决办法:

进入BIOS系统,将virtualization里面的值设为 enabled。

以我的thinkpad为例吧!
BIOS -> security -> virtualization 

问题四:(这个一般都会出现)

模拟机测试运行项目时报错:
Execution failed for task ':app:clean'. > Unable to delete directory

Windows下安装和构建我们第一个React Native应用程序(我是用的win10)
解决办法:
关闭android studio。
打开你创建的项目, 在android/app/ 下找到build文件夹,直接删除,防止恢复,用360粉碎文件!一劳永逸!
然后再重启运行Android stuido就可以了!

好吧!以上问题一一排除,现在宝宝的react-native创建项目到真机或模拟机测试都正常了!


最后最后,android-studio自带模拟测试机,
使用android-studio模拟机测试不需要命令行npm start了,如果开启反而要出错!
然后关于android-studio模拟机的创建这里就不笔记了,建议看原文档!

推荐原文档:http://facebook.github.io/react-native/docs/getting-started.html