native react学习记录（一）运行环境的安装

开发环境windows+Android 

一、安装依赖项

需要Node，React Native命令行界面，Python2，JDK和Android Studio

可以使用Chocolatewindows包管理工具安装

安装Chocolatey：

使用管理员权限运行cmd并输入：（参考chocolatey安装）

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

　　

在命令行输入 验证Chocolatey已经安装成功：

choco
choco -?

　　

使用choco安装node,python2,jdk,或者直接手动下载并安装。

choco install -y nodejs.install python2 jdk8

　　nodejs下载路径：https://nodejs.org/en/download/

可以通过node -v的命令来测试NodeJS是否安装成功 

python2.7下载路径：https://www.python.org/downloads/release/python-2713/

如果安装了python3的话，注意吧python3中的python.exe 和pythonw分别改为python3.exe和pythonw3.exe

　　jdk8下载路径：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

如果手动安装的话，请自行配置JAVA_HOME的环境变量H:\Java\jdk1.8.0_172

Node附带npm，允许您安装React Native命令行界面。在使用npm之前需要重新以管理员身份开启cmd,以使得node可以使用。

使用国内镜像加速npm和yarn

在命令提示符或shell中运行以下命令：

npm install -g react-native-cli

　　

配置Android开发环境：

1.下载并安装Android Studio

在提示选择安装类型时，选择“自定义”设置。确保选中以下所有框旁边的框：

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

 

2、安装Android SDK

Android Studio默认安装最新的Android SDK。但是，使用本机代码构建React Native应用程序Android 6.0 (Marshmallow)尤其需要SDK。可以通过Android Studio中的SDK Manager安装其他Android SDK。

可以从“欢迎使用Android Studio”屏幕访问SDK Manager。单击“配置”，然后选择“SDK Manager”。

Android Studio欢迎

 

从SDK Manager中选择“SDK平台”选项卡，然后选中右下角“显示包详细信息”旁边的框。查找并展开Android 6.0 (Marshmallow)条目，然后确保检查以下所有项：

  • Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

接下来，选择“SDK工具”选项卡，然后选中“显示包详细信息”旁边的框。查找并展开“Android SDK Build-Tools”条目，然后确保23.0.1选中该条目。

最后，单击“应用”以下载并安装Android SDK和相关的构建工具。

 

3.配置ANDROID_HOME环境变量

React Native工具需要设置一些环境变量才能使用本机代码构建应用程序。

win10电脑右击选择“属性”，选择“高级系统设置”--“环境变量”---“新建”ANDROID_HOME指向新的环境变量：

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
同时 在path中分别输入：
%ANDROID_HOME%\tools
%ANDROID_HOME%\platform-tools

4、打开新的cmd,以便使得环境变量的配置生效，输入"adb“检查上面配置是否生效。

创建新的应用程序 

react-native init AwesomeProject

　　提示安装yarn,

国内由于npm安装第三方包很慢，所以更换淘宝镜像

使用国内镜像加速npm和yarn

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　这样就可以使用 cnpm 来安装包了

cnpm install -g yarn

　　

准备Android设备

 使用虚拟物理设备

 

如果您刚刚安装了Android Studio，将刚刚创建的AwesomeProject导入Android Studio中，创建新的AVD,找到手机图标，选择穿件虚拟设备，选择任意手机设备，单击下一步：

Android Studio AVD Manager

选择“x86 Images”选项卡，然后查找带有Android 6.0（Google API）目标的Marshmallow API Level 23，x86_64 ABI图像。

安装HAXM

如果您没有安装HAXM，请单击“安装HAXM”或按照这些说明进行设置，然后返回AVD Manager。

AVD清单

单击“下一步”，然后单击“完成”以创建AVD。此时，您应该可以单击AVD旁边的绿色三角形按钮启动它，然后继续下一步。

如果没有启动检查是否有足够的空间。

 

运行React Native应用程序

 

cd AwesomeProject
react-native run-android

　　第一次会出现：

Downloading https://services.gradle.org/distributions/gradle-3.5.1-all.zip

 可以手工下载gradle-3.5.1-all.zip，百度网盘：

https://pan.baidu.com/s/1qYKCPZm，提取码：h1e2 

把下载下来的文件放到：

C:\Users\<your username>\.gradle\wrapper\dists\gradle-3.5.1-all\42vjebfdws9pjts3l4bouoq0p,42vjebfdws9pjts3l4bouoq0p名字不固定
有可能出现：NDK is missing a "platforms" directory

解决方法：

到此点击打开链接下载对应版本，下载完毕后将其解压，将其内部的所有文件全部移动至新建的ndk-build文件夹下，重启Android Studio，问题解决。

C:\Users\《your username》\AppData\Local\Android\Sdk\ndk-bundle

再次发现error:

error: bundling failed: Error: Unable to resolve module `AccessibilityInfo` from `H:\AwesomeProject\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map

解决方法：

 

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

没有安装watchman的话：下载最新的watchman.zip，并在watchman.exe的目录下运行,注意下属命令应该在项目路径AwesomeProject文件夹下执行：

1. Clear watchman watches: `watchman watch-del-all`.

2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.

4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

 

Unable to resolve module AccessibilityInfo from XXX

android启动后大红屏错误, 具体信息是这个

Unable to resolve module `AccessibilityInfo` from `xxx\node_modules\react-native\Libraries\
react-native\react-native-implementation.js`: Module does not exist in the module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`.  
  4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

按照报错信息中的四个方法都没有解决此问题, 后来在github的问题讨论中找到了一条不起眼的答案. 
按照上面教程走下来后安装的是最新的ReactNative(现在是0.56), 这个问题可能是新版本的bug, 降级到0.55即可.

降级流程: 
1. 在工程目录下执行 E:\ReactNative\Test>npm install --save react-native@0.55.4; 
2. 然后 E:\ReactNative\Test>react-native upgrade, 这里会提示你要不要覆盖原来的部分文件, 我是一路y, 最后提示 Successfully upgraded this project to react-native v0.55.4; 
3. 接下来再运行, 提示一个android目录下build错误, 我猜应该是build旧文件的错误, 所以删掉了android目录下的几个build文件夹; 
4. 又有问题( 如果没有这么多问题就跳过这些步骤 ): MainApplication 内找不到 BuildConfig ,代码问题好办, 用AS打开, import BuildConfig 就可以了.

另外, Unable to resolve module react-navigation from 可以用 npm install react-navigation@https://github.com/react-community/react-navigation.git --save 解决.

至此, mission complete, 来到下一个问题(手动滑稽)

Module build failed: Error: Plugin 0 specified in “base” … provided an invalid property of “default”

也是个大红屏错误, 是在babel-preset-react-native包里的文件错误, 看了下那个文件, 没有几行代码.

最后在 https://github.com/facebook/react-native/issues/15545 的回答中找到适合我的方法.

执行 npm install --save-dev babel-preset-react-native@2.1.0 后再次运行即可, 终于看到梦寐以求的界面了

这里写图片描述

如何同时运行两个RN项目

我们知道, 有时候运行项目时会报错 8081端口被占用, 一般都是因为启动过一个项目的原因, 在任务管理器中杀掉node.js即可. 
但如果我们不想杀掉它呢, 我就是想同时跑两个项目, 这也是可以的, 在这个文件中可以配置 
这里写图片描述 
在service.js的61行( 可能不同的版本不一样 )处修改8081为想要的其他端口即可, 注意手机上也要重新配置端口 
这里写图片描述

 

 

 

 

posted @ 2018-07-17 16:36  tutu_python  阅读(598)  评论(1)    收藏  举报