React Native开发环境配置

原创 2016年09月09日 13:13:25

手机系统:Android
开发环境:Mac

首先要确认安装以下工具:

Homebrev

安装:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

查看:

$ brew -v
Homebrew 0.9.9 (git revision 95863; last commit 2016-09-07)
Homebrew/homebrew-core (git revision deaf3; last commit 2016-09-07)

node

安装:

brew install node

查看:

$ node -v
v6.5.0

watchman

安装:

brew install watchman

查看:

$ watchman -v
4.6.0

React Native command line

安装:

sudo npm install -g react-native-cli

查看:

$ react-native -v
react-native-cli: 1.0.0
react-native: 0.32.1

打开模拟器,创建&运行测试APP:

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

遇到提示:

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/caoyuhong/AwesomeProject/android/app/build.gradle' line: 110

* What went wrong:
A problem occurred evaluating project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

解决方案:

在工程目录/android下,创建文件local.properties,文件中写入自己Android SDK位置

sdk.dir=/Applications/Develop/adt-bundle-mac-x86_64-20140702/sdk

再次输入react-native run-android
如果build成功,会出现以下信息:

Installing APK 'app-debug.apk' on 'Google Nexus 5 - 5.0.0 - API 21 - 1080x1920 - 5.0'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 15.432 secs

如果APP没有自动启动,看到如下信息:

/bin/sh: adb: command not found
Starting the app (adb shell am start -n com.awesomeproject/.MainActivity...

则需要配置adb环境变量:

首先查看用户目录下是否有.bash_profile文件,如果没有,自己创建一个

cd ~
a | grep .bash_profile

修改.bash_profile的PATH,

vim .bash_profile

在:${PATH}前,其他环境变量后,加上adb目录。Mac上环境变量和Linux一样,是用:分隔的

PATH="(其他的环境变量):/Applications/Develop/adt-bundle-mac-x86_64-20140702/sdk/platform-tools/:${PATH}"

修改后保存配置

source .bash_profile

重新运行run命令,
查看模拟器:

等待一下,出现如下画面,说明配置成功

版权声明:本文为博主原创文章,未经博主允许不得转载。

react native 开发环境配置

先容我吐槽一番,为了配置ios端的RN的开发环境(一个ios攻城狮),从早9点一直忙到下午3点,终于算是success了,说起RN(react native的简称),网上的资料和博客是遍地开花,我在配...
  • kelin_Li
  • kelin_Li
  • 2016年03月16日 14:40
  • 462

React native 开发环境配置 for windows

React native开发环境配置  目有前来讲使用windows的开发者还是比较多的,毕竟门槛会低很多。移动开发可谓是热火朝天,涌现了一下框架,为移动开发助力。React Native是react...
  • xiao_Yu_X
  • xiao_Yu_X
  • 2016年08月13日 14:11
  • 267

React native开发环境配置

官方的配置文档 这篇文章只是我个人配置过程中遇到问题,希望能留个印象,所以写一篇小记,具体配置流程参考官方文档。首先的是node.js的安装和环境变量的配置。安装不需要多说,下载文件安装过程直接狂点...
  • qq_36425506
  • qq_36425506
  • 2017年09月20日 21:01
  • 105

环境配置:React Native 开发环境配置 For Android

React Native 是FaceBook开源的一个项目,FaceBook希望可以用写 Web App 的方式去写 Native App。它可以让我们用JS和React来开发应用,使用React N...
  • loongggdroid
  • loongggdroid
  • 2016年10月28日 07:51
  • 583

React Native简介及开发环境配置

React Native简介React Native是Facebook 在2015 大会上推出的基于 JavaScript 的开源框架。React Native 结合了 Web 应用和 Native ...
  • u014005316
  • u014005316
  • 2017年04月07日 11:37
  • 355

React Native 开发环境配置---ubuntu14 linux

小白用的是ubuntu 14.4 64位的,说一下开发之前的配置。 1 安装node环境 这个可以随便搜一下很多, 官网下载 配置环境变量 最后一定要验证是否成...
  • wu_xiao_yang
  • wu_xiao_yang
  • 2016年09月30日 14:10
  • 77

H5、React Native、Native应用对比分析

摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Na...
  • yczz
  • yczz
  • 2016年01月06日 13:07
  • 40956

React Native 高质量学习资料汇总

去年我整理过一份《平安科技移动开发二队技术周报(特别版のReact Native专题)》,作为 React Native 入门的学习资料,半年多过去了,React Native 发布也已经一年多了,随...
  • u012992171
  • u012992171
  • 2016年07月11日 11:14
  • 2732

Android React Native加载图片资源的正确姿势

在这篇文章中Android React Native的使用细节问题提到了 图片使用的问题,也提到了无论用哪种方法都不能加载app内部的图片资源的问题,当时的代码是这样子的 在官方文档中也是这么写的Im...
  • sbsujjbcy
  • sbsujjbcy
  • 2015年11月22日 21:12
  • 33363

分享 50 个完整的 React Native 项目

分享 50 个完整的 React Native 项目 原创 2017-04-17 勤劳的 http://mp.weixin.qq.com/s?__biz=MzA3NjgyNzk2Mw==&mid=...
  • sinat_17775997
  • sinat_17775997
  • 2017年04月17日 09:38
  • 5154
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native开发环境配置
举报原因:
原因补充:

(最多只允许输入30个字)