React Native实战系列第二篇 — 环境配置 - 简书
React Native实战系列第二篇 — 环境配置
前言本系列文章将带着你从React Native入门到精通React Native开发，包括大型电商项目实战、大型新闻项目实战（一套代码同时运行在iOS平台和Android平台）。-------------如果你使用的是Mac OS系统,请参照以下步骤-----------安装前注意：1）在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：sudo chown -R `whoami` /usr/local2）如果命令行提示command not found，请加上sudo获得最高权限
一、环境需求
安装HomebrewHomebrew是OS X的套件(包)管理器，用于安装Node.js和一些其他必须的工具软件。安装方式:ruby -e "$(curl -fsSL /Homebrew/install/master/install)"1.2
安装npm 和 Node.jsNode.js最好安装5.0及其以上更高版本，node安装成功后npm自动也就有了，直接下载安装Node.js，网址：https://nodejs.org/en/download/（资料中已有）。brew install node1.3
安装WatchManWatchMan是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。brew install watchman
验证是否安装成功
安装Flowflow是一个 JavaScript 的静态类型检查器。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。brew install flow
验证是否安装成功
二、React Native安装2.1
Yarn、React Native的命令行工具（react-native-cli）是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。npm install -g yarn react-native-cli2.2 安装截图如下:
安装成功后截图
-------------如果你使用的是Windows系统,请参照以下步骤-----------一、确保所有的命令行操作都在管理员权限下操作二、需要安装的插件2.1 ChocolateyChocolatey是一个Windows上的包管理器，类似于Mac上的watchMan。一般的安装步骤应该是下面这样, 如果国内访问失败, 请使用翻墙工具:@powershell -NoProfile -ExecutionPolicy Bypass -Command"iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin2.2
Python 2choco install python2注意目前不支持Python 3版本。2.3 Node打开命令提示符窗口，使用Chocolatey来安装NodeJS.choco install nodejs.install安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。npmconfig set registry https://registry.npm.taobao.org --globalnpmconfig set disturl https://npm.taobao.org/dist --global2.4
Yarn、React Native的命令行工具（react-native-cli）是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。npminstall -g yarn react-native-cli安装完yarn后同理也要设置镜像源：yarn configsetregistry https://registry.npm.taobao.org--globalyarn configsetdisturl https://npm.taobao.org/dist--global-------------以下步骤为公共步骤-----------三、 ios开发环境需求Xcode 8 及其以上更高版本四、 Android开发环境需求4.1
安装最新版的JDK:你可以在命令行中输入javac -version来查看你当前安装的JDK版本。下载安装地址：/technetwork/java/javase/downloads/jdk8-downloads-2133151.html （资料中已经存放）4.2
建议安装Android studio，在安装过程中请严格执行以下选项：1）选择 Custom 选项
选择 Custom 选项
2）勾选Performance和Android Virtual Device
勾选Performance和Android Virtual Device
3）安装完成后，在Android Studio的启动欢迎界面中选择Configure | SDK Manager
选择Configure | SDK Manager
4）在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
Show Package Details
5）在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository。
6）ANDROID_HOME环境变量确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile文件中，使用vi ~/.bash_profile。# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。export ANDROID_HOME=~/Library/Android/sdk然后使用下列命令使其立即生效：source~/.bash_profile可以使用echo $ANDROID_HOME检查此变量是否已正确设置。4.1
安装GenymotionGenymotion是一个第三方模拟器，它比Google官方的模拟器更易设置且性能更好。但是，它只针对个人用户免费。1）下载并安装Genymotion/2）打开Genymotion,如果你尚未安装VirtualBox,它有可能会提示你安装3）创建一个模拟器并启动4）按下?+M可以打开开发者菜单(在安装并启动了React Native应用之后)4.2
Gradle Daemon开启可以极大地提升java代码的增量编译速度。touch ~/.gradle/gradle.properties && echo"org.gradle.daemon=true"&&~/.gradle/gradle.properties五、 React Native的第一个应用5.1 执行命令,生成一个工程react-native init 项目名称注意:由于众所周知的网络原因，需要等待一段时间（具体视网络情况而定）。react-native命令行从npm官方源拖代码时会遇上麻烦，可以将npm仓库源替换为国内镜像：npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist5.2
5.3 目录结构截图目录结构分析:a）默认生成android和ios两个平台的原生项目；b）其中，index.android.js和index.ios.js文件为Android和iOS的空壳应用文件；c）此外，node_modules文件夹，是为Node.js存放和管理npm包资源，也包含React Native框架文件。查看index.ios.js中的代码:
index.ios.js
六、运行工程文件不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为Debug Server，默认运行在8081端口，APP 通 Debug Server 加载 js。6.1 打开Xcode，运行你的第一个React Native创建的iOS应用
图1 - 启动React native 服务器
图2 - 客户端运行界面
6.2 把React Native创建的应用跑在Android上a) 命令行执行cd SeeMyGoProduct,路径切换到项目主目录b) 命令行执行react-native run-android进行加载运行android 应用。c) 使用编辑器进行打开和修改index.android.js文件，接着通过菜单按钮选择Reload JS来进行刷新修改七、管理React Native库的版本在开发中，会经常的去控制React Native的版本库，得以适配各种条件下的开发，那该如何查看、控制ReactNative的版本呢？7.1 查看本地的React Native的版本命令行输入react-native --version命令行效果:
命令行效果
7.2 更新本地的React Native的版本命令行输入npm update -g react-native-cli7.3 查询react-native的npm包最新版本NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。npm包地址 ：/package/react-native命令行查询npm info react-native
项目中查看
7.4 升级或者降级npm包的版本npm install --save react-native@0.187.5 更新项目templates文件（可选）新的npm包会包含更新在运行react-native init命令生成的一些动态文件，例如init创建项目的时候会生成iOS和Android的子项目，我们可以通过以下的命令进行获取最新的代码命令行查询react-native upgrade八、WebStom设置React Native代码提示8.1
从gitHub上下载xml插件git clone /virtoolswebplayer/ReactNative-LiveTemplate8.2
安装将ReactNative.xml复制到~/Library/Preferences/WebStorm10/templates，然后重启 WebStrom。
旋之华，专注于跨平台和全栈方向。react-native获取设备信息组件（react-native-device-info） - 河南北云软件有限公司
&-&react-native获取设备信息组件（react-native-device-info）
分享者： & &
一、组件说明：
该组件同时适配Android和IOS平台。
二、组件介绍
1.首先需要安装组件:npm install react-native-device-info --save
2.IOS初始化:打开Xcode——&右击Libraries——&选择文件到当前项目，进入到node_modules/react-native-device-info——&添加.xcodeproj文件
2.1.在Xcode中点击你的工程名字——&Build Phases——&Link Binary With Libraries——&点击 '+'号按钮，添加libRNDeviceInfo.a文件(如下图所示)
2.2.添加环境变量:$(SRCROOT)/../react-native/React and $(SRCROOT)/../../React 并且修改 recursive
2.3.好了，下面就是基本的用法了
import DeviceInfo from 'react-native-device-info'
console.log("Device Unique ID", DeviceInfo.getUniqueID());
// e.g. FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9
// * note this is IDFV on iOS so it will change if all apps from the current apps vendor have been previously uninstalled
console.log("Device Manufacturer", DeviceInfo.getManufacturer());
// e.g. Apple
console.log("Device Model", DeviceInfo.getModel());
// e.g. iPhone 6
console.log("Device ID", DeviceInfo.getDeviceId());
// e.g. iPhone7,2 / or the board on Android e.g. goldfish
console.log("Device Name", DeviceInfo.getSystemName());
// e.g. iPhone OS
console.log("Device Version", DeviceInfo.getSystemVersion());
// e.g. 9.0
console.log("Bundle Id", DeviceInfo.getBundleId());
// e.g. com.learnium.mobile
console.log("Build Number", DeviceInfo.getBuildNumber());
// e.g. 89
console.log("App Version", DeviceInfo.getVersion());
// e.g. 1.1.0
console.log("App Version (Readable)", DeviceInfo.getReadableVersion());
// e.g. 1.1.0.89
console.log("Device Name", DeviceInfo.getDeviceName());
// e.g. Becca's iPhone 6
console.log("User Agent", DeviceInfo.getUserAgent()); // e.g. Dalvik/2.1.0 (L U; Android 5.1; Google Nexus 4 - 5.1.0 - API 22 - 768x1280 Build/LMY47D)
console.log("Device Locale", DeviceInfo.getDeviceLocale()); // e.g en-US
console.log("Device Country", DeviceInfo.getDeviceCountry()); // e.g US
3.Android的安装：
3.1首先需要修改下Gradle文件
在你的根目录下运行:react-native link react-native-device-info
3.2在MainActivity.java文件中进行注册模块(react-native的版本需要&0.18)
import com.learnium.RNDeviceInfo.RNDeviceI
// &--- import
public class MainActivity extends ReactActivity {
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
protected List&ReactPackage& getPackages() {
return Arrays.&ReactPackage&asList(
new RNDeviceInfo(), // &------ add here
new MainReactPackage());
3.3如果你需要在安卓上获取设备的名字，需要修改AndroidManifest.xml配置文件，来获取权限。
&uses-permission android:name="android.permission.BLUETOOTH"/&
3.4用法同IOS。
翻译链接:/rebeccahughes/react-native-device-infoReactNative踩坑之配置调试端口的解决方法
作者：Conan_Lee
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了ReactNative踩坑之配置调试端口的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文介绍了ReactNative踩坑之配置调试端口的解决方法，分享大家，顺便也给自己留个笔记
问题是这样的,由于公司的机器安装了安全软件，http://localhost:8081被占用了。(windows上配置环境真不易，最后一步还是被公司环境坑了)
所以导致按照教程配置完环境最后到真机上还是刷不出来界面
那么我们就这么放弃了吗？当然不，不然就白忙活了
分析问题：端口被占用，那我们换一个端口不就行啦，于是乎各种查阅资料，发现PackageManager（包管理服务）在启动的时候是可以配置端口的.如下命令
react-native start --port 18081
这样Launch起来的包管理服务就在端口18081上了，在Chrome上敲localhost:18081神奇的显示了ReactNative的相关界面，说明正常了。
接着在真机上需要敲这个命令
adb reverse tcp:18081 tcp:18081
这个命令会将手机的调试端口设置成与包管理服务一致的端口18081
然后我在真机上跑了一遍程序，结果还是显示不出来。莫名的伤感有没有
在各种找不到资料的情况下，开始翻看ReactAndroid源码，经过分析最后找到这么一段关键的代码
public String getDebugServerHost() {
// Check host setting first. If empty try to detect emulator type and use default
// hostname for those
String hostFromSettings = mPreferences.getString(PREFS_DEBUG_SERVER_HOST_KEY, null);
if (!TextUtils.isEmpty(hostFromSettings)) {
return Assertions.assertNotNull(hostFromSettings);
String host = AndroidInfoHelpers.getServerHost();
if (host.equals(AndroidInfoHelpers.DEVICE_LOCALHOST)) {
"You seem to be running on device. Run 'adb reverse tcp:8081 tcp:8081' " +
"to forward the debug server's port to the device.");
好家伙，原来是从SharedPreference中先读了PREFS_DEBUG_SERVER_HOST_KEY这个值，如果为空则用AndroidInfoHelpers.getServerHost()这个函数返回值(也就是loacalhost:8081)
那么解决办法就浮出水面了，只需要在Application初始化的时候讲这个值设置成我们自定义的就好了，类似
SharedPreferences mPreferences = PreferenceManager.getDefaultSharedPreferences(applicationContext);
mPreferences.put("debug_http_host", "localhost:18081");
这段代码最好写在SoLoader.init(this, /* native exopackage */ false);调用之前，因为在windows上remote debug js的时候如果不写在前面似乎调试不起效果(调试的地址端口也变成了18081了)
写在最后的话，在找不到资料解决问题的时候，可以开始撸起袖子看代码了！！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具react-native开发：window下安装与环境配置遇到的问题 - CSDN博客
react-native开发：window下安装与环境配置遇到的问题
如何安装Java JDK?如何安装Android SDK?如何安装react-native?运行react-遇到的问题，以及解决方法
如何安装react-native?
Android SDK
如何安装Java jdk？
如何安装Android SDK?
用Android Studio工具安装
或者下载最新的Android SDK 文件，到官网选择自己想要的版本下载
Android SDK文件，里面有两个应用程序： “SDK Manager.exe”（负责下载或更新SDK包） 和 &AVD Manager.exe&（负责创建管理虚拟机）。我们先运行“SDK Manager.exe”进行SDK下载。
如何配置android sdk的环境变量：
1）新建环境变量，ANDROID_HOME：Android SDK Manager的位置
例如我的电脑上面：（ANDROID_HOME=& C:\Users\hsq\AppData\Local\Android\Sdk）
2）设置环境变量PATH：例如：（PATH=& %ANDROID_HOME%\%ANDROID_HOME%\platform-tools）
如何安装nodejs?
下载地址：
下载node.js，找好对应的版本，然后去安装就可以了。
大家可以通过node -v的命令来测试NodeJS是否安装成功
安装react-native命令行工具
译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像，在命令行输入：
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm install -g react-native-cli
安装好之后，可以命令行下就有react-native命令了
创建react-native遇到的问题：
react-native run-android
首次运行需要等待数分钟并从网上下载gradle依赖。（这个过程屏幕上可能出现很多小数点，表示下载进度。这个时间可能耗时很久，也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。总之要顺利下载，请使用稳定有效的科学上网工具。）
运行完毕后可以在模拟器或真机上看到应用自动启动了。
如果apk安装运行出现报错，请检查上文中安装SDK的环节里所有依赖是否都已装全，platform-tools是否已经设到了PATH环境变量中，运行adb devices能否看到设备。
至此，应该能看到APP红屏报错，这是正常的，我们还需要让app能够正确访问pc端的packager服务。
摇晃设备或按Menu键（Bluestacks模拟器按键盘上的菜单键，通常在右Ctrl的左边 或者左Windows键旁边），可以打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。
如果真实设备白屏但没有弹出任何报错，可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。
F:\react-native开发\projects\react-weather-master&react-native run-android
JS server already running.
Building and installing the app on the device (cd android && gradlew.bat installDebug...
FAILURE: Build failed with an exception.
Build file 'F:\react-native开发\projects\react-weather-master\android\app\build.gradle' line: 1
* What went wrong:
A problem occurred evaluating project ':app'.
& Failed to apply plugin [id 'com.android.application']
& Your project path contains non-ASCII characters. This will most likely cause the build to fail on Windows. Please move your project to a different directory. See /95744 for details. This warning can be disabled by using the command line flag -Dcom.android.build.gradle.overridePathCheck=true, or adding the line com.android.build.gradle.overridePathCheck=true' to gradle.properties file in the project directory.
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 7.657 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
分析原因：从上面错误提示，看出是项目目录路径中有中文，导致运行报错
解决方法：将项目复制到一个没有中文的路径文件夹，再进入工程目录，运行react-native run-android
参考资源：
本文已收录于以下专栏：
相关文章推荐
D:\Android\WorkSpace\AwesomeProject&react-native run-android
JS server already running.
Buildin...
准备工作注意：小米手机MIUI有坑，文末有解决方法首先，你需要先安装Node.js并进行环境变量的配置，具体可以参考我的另一篇文章nodejs在windows下的安装配置(使用NVM的方式)，或者你也...
React Native
Mac环境下的React-Native环境配置流程（主要解决问题Could not install the app on the device）纯属记录，如有雷同纯属巧合（真不害臊~(@^_^@)~）...
原文地址：http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%...
最详细的Windows版本搭建安装React Native环境配置网上大部分的React Native环境搭建的视频和博客都是Mac的，剩下为数不多的windows环境搭建的文章全是坑（博主流泪呀）1...
整了2天，终于把 react native的环境搭建好了，可以这么说吧，react native 刚推出android，本身存在着各种bug，需要我们自己解决。
而且吐槽一下，react nativ...
说在前面的话:
感谢同事金晓冰倾情奉献本环境搭建教程
之前我们已经讲解了React Native的OS X系统的环境搭建以及配置，鉴于各大群里有很多人反应在Windows环境搭建出现各种问题，今天...
史上最全Windows版本搭建安装React Native环境配置
ReactNative技术专题
React Native 搭建环境过程。以及遇到的一些问题及解决方案。
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
React-native环境的搭建
在这里我把用的软件全部都传到了我的百度网盘上，可以直接去下载：
license文件
密码：wyoq
adt文件，包含eclipse和sdk文件
密码：atq8
密码：11qg
pyhton文件
密码：ab3e
gradle文件
密码：92tj
我建议大家把软件安装到D盘；
修改环境变量
在系统变量里添加：
变量名：JAVA_HOME
变量值：你安装的jdk的位置
修改环境变量path
%JAVA_HOME%/
写在变量的最前边；
添加环境变量classpath
%JAVA_HOME%/lib/dt.%JAVA_HOME%/lib/tools.jar
在命令行里分别输入:
java -version
搭建android环境
安装sdk和eclipse
这里用的就是上面的adt文件，解压完以后，里面就包含了sdk和eclipse
配置环境变量
变量名：ANDROID_HOME
变量值：你安装sdk的文件位置
修改环境变量path
;%ANDROID_HOME%/%ANDROID_HOME%/platform-
在命令行里输入：
安装Node, Python2
安装完以后检查是否安装成功
安装react-native
npm install -g react-native-cli
如果安装的时候比较慢的话，这里有两个淘宝镜像，可以使用镜像安装：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
react-native init test
进入项目目录
如果要让它跑起来的话就必须要有一个安卓设备，虚拟机和真机都可以，这里我就连接上了一个真机
react-native run-android
解决运行问题
这里我在运行的时候遇到一个错误，报错的是adb没有配置环境：
02:49:39 E/ddms: 'E:\android\sdk\platform-tools\adb.exe,start-server' failed -- run manually if necessary
:app:installDebug
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:installDebug'.
& com.android.builder.testing.api.DeviceException: java.lang.RuntimeException: Timeout getting device list.
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 43.302 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
1.把sdk添加到环境变量里面：
变量名：android
变量值：你abd文件所在的位置
2.修改环境变量：
添加%android%
这样一来我们的问题就解决了，然后重新打开命令窗口，输入react-native run-android就可以了；
0 收藏&&|&&0
你可能感兴趣的文章
1 收藏，174
4 收藏，1k
1 收藏，2.6k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：