初学 React native | 环境搭建(在模拟器上运行)

我的电脑是windows 所以就以 windows上+Android 配置React native 环境

网上的安装教程非常多,我总结了一下,出错原因主要是node java python c++  sdk 环境有问题,或者就是自己没有科学上网(你懂),网络有问题,导致了安装失败

至于如何安node java python c++ react-native-cli Android  sdk 我就不那么详细的说了,我主要说下我碰见的问题,想了解具体如何解决,点击,还有

node

node window安装比较简单,进入官网下载,安装点击next即可,node会自动配置环境变量

要注意的是node版本要4.1以上,公司的电脑是8,我自己的电脑是6都安装成功了

还有一点是设置淘宝源的问题,相信玩过node的小伙伴肯定是非常清楚

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

python

python的安装比较简单,进入官网下载,一定要选择python2版本,根据自己电脑的是多少位的选择,x86是32位的  x64是64位的

安装起来也比较简单,应注意的是要配置环境变量,如何配置环境变量,飞机票

java

 java安装也比较简单,进入官网下载

 注意安装路径的问题,建议不要自己选择安装路径,否则会产生not find tool.jar的错误

c++

 DEV C++即可

react-native-cli

 npm install -g yarn react-native-cli

 检测是否安装成功  react-native -v

sdk

sdk是最容易出问题

安装sdk 先要安装Android Studio

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

Android Studio安装起来不难,唯一注意的是,不要改安装时推荐的路径,改了后要自己的

主要是这一步,出现install type 选择cancel(取消),自己setting

自己Configure

这部分应该说一下:如何没有选择Android Studio 默认的路径,则Configure无法识别你自己的路径,需要自己的粘贴进去

箭头所指就是路径

箭头所指下面有三个选项卡

图片最下面有show Details(点击)

在SDK platform 默认会勾选几个,不管默认的,自己再选一个1. Android 下面的Android SDK Platform 23

在SDK tool 默认也会勾选几个 ,不管默认的,自己选Tools下的2. Android SDK Build-tools (23.0.1)(这个必须版本严格匹配23.0.1)  3. Android Support Repository

只需要选这个几个就可以了 ,点击ok,会安装一会,安装完成需要配置一下环境变量

一定是当前用户(箭头所指),而不是系统变量   确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

然后还需要在配置一下环境变量的path

sdk所在的路径加 tools 与 platform-tools

C:\Users\hejian.tp\AppData\Local\Android\Sdk\tools

C:\Users\hejian.tp\AppData\Local\Android\Sdk\platform-tools

所有点击确定即可。

sdk配置是比较麻烦的,但是也不难,这个也是最容易出问题,耐心点,多碰见几次错误,就好解决了。

模拟器或者真机

先说真机吧。连接真机的小伙伴在配置成功Android SDK后,在任意命令行中 输入 adb  看有反应没

如果有反应,则是下面的反应,没有就说明sdk环境有问题,检查上一步骤即可

继续输入 adb devices

出现下面的字符就说明正确

测试安装

到任意盘里面 d:
react-native init AwesomeProject
cd AwesomeProject
react-native run-android

run-android会跑很长时间,跑完

出现这个说明就安装成功了

模拟器的安装,推荐安装海马玩模拟器

安装直接安装即可,安装成功后,执行下列命令

连接安卓设备
adb connect 127.0.0.1:26944

在react项目文件夹中

react-native start

出现以下界面表示安装成功了

成功界面

好了,这就是这次安装的介绍了。

常见问题可点击这里

官网教程

时间: 2024-10-12 13:46:20

初学 React native | 环境搭建(在模拟器上运行)的相关文章

React Native环境搭建

React Native环境搭建 by 伍雪颖 1.安装 node,watchman,flow brew install node brew install --HEAD watchman brew install flow 2.安装react-native npm install -g react-native-cli 3.初始化工程 react-native init Helloworld 4.用xcode打开Helloworld.xcodeproj,运行 大功告成!

React Native 环境搭建攻略

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android, 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android. 近期闲来无事想搭建环境玩耍一下.现把遇到的问题总结一下希望对于新手有所帮助. 首先我运气很好得找到了极客学院翻译的中文版wiki于是按照下面的说明进行了搭建 PS: 文档详细内容请移步: (http://wiki.jikexueyuan.com/project/react

逻辑性最强的React Native环境搭建与调试

React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用,就足矣证明其实力! 本文分为以下几个部分: 一.环境搭建: 二.APP调试与运行: 三.扩展知识: ------------------------------------------------------------------------------------分割线-------------

react Native环境 搭建

react Native的优点:跨平台 低投入高回报 性能高 支持动态更新.一才两用(ios和Android) 开发成本第 代码复用率高.windows环境搭建react Native开发环境1.安装node.js nmp-v查看node.js/npm版本2.npm install -g react-native-cli安装依赖3.react-native -help可以看相关命令4.Android中文域名 安装Android开发工具Android Studio5.react-native in

React Native 环境搭建踩坑

React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-native/docs/getting-started 选择  Building Projects with Native Code 大家可以参照官方文档一步一步来,下面是我遇到的一些问题总结 查看一下node版本           node -v ------- 进入安装之前最好查一下JDK版本   

iOS版 React Native 环境搭建

今天没事,搞了搞React Native,也都是才开始弄,并没有感受过它的强大,嘿嘿.今天算是demo可以跑了吧.特此记录一下搭建过程,留着日后使用. 特此声明,才过程,不保证百分百成功,因为本人在搭建的时候参考了好多东西相关文章,还请各位看官自请斟酌,啦啦啦啦我都是这么"负责任". 极客学院的官方文档中文版 -- 特此奉上-- 传送门  主要的学习参考对象, 此内容中可以看到英文文档 此外,安装步骤参考的是,这篇文章,这里记录是为了自己观看方便,和参考文章有点出入 搭建步骤如下: H

React Native 环境搭建

参考  http://reactnative.cn/docs/0.39/getting-started.html 在环境搭建完成后,测试运行时我遇到一个问题:"Unhandled JS Exception:SyntaxError". 因为我安装完环境后,是直接在Xcode中点击Run,后来我用命令行运行就没这个问题了(react-native run-ios). 第一次运行用命令行,以后可以直接在Xcode中Run. 在iOS 模拟器 按Cmd+R不能刷新怎么解决? 设置连接电脑键盘即

React Native环境配置和简单使用

# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 了解 React Native 大家都知道,开发原生 App 的成本很高,但是目前基于原生开发仍然是必需的,随着 HTML

史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views 编辑推荐:稀土掘金 是一个高质量的技术社区,从 React Native 到 RxJava,性能优化到优秀开源库,让你不错过移动开发的每一个技术干货.各大应用市场搜索「掘金」,技术干货尽在掌握中. 说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X