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

React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用,就足矣证明其实力!

本文分为以下几个部分:

  一、环境搭建;

  二、APP调试与运行;

  三、扩展知识;

------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------

一、环境搭建

系统配置:Win10

模拟器:Visual Studio Emulator for Android(可以脱离VS单独安装,也可以使用其他其他模拟器或真机调试)

环境搭建分为两个部分:

1、Android开发环境搭建(之前已经设置过,可以跳过此步骤);

2、RN开发环境搭建;

1、Android开发环境搭建;

①、安装JDK,具体步骤不详述,可以使用Java -version来检测一下;

②、安装Android SDK,需要设置环境变量:ANDROID_HOME => Android SDK Manage安装位置,ex:ANDROID_HOME => E:\android\sdk;

③、设置Android SDK,需安装已下项:

  • Android SDK Build-tools version 23.0.1
  • Android 6.0 (API 23)
  • Android Support Repository
  • Local Maven repository for Support Libraries

如图:

2、RN开发环境搭建:

①、安装node环境,https://nodejs.org/en/点击下载V6.xxx安装即可;

②、安装Git,https://git-for-windows.github.io/点击下载安装即可;

③、安装RN脚手架:npm i react-native-cli -g

到此为止环境已经搭建完成。

------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------

二、APP调试与运行

1、创建项目

  npm init demo1

2、安装依赖包

  进入demo1根目录执行:npm i

3、启动服务器

  react-native start

  等一段时间,用浏览器访问http://localhost:8081/index.android.bundle?platform=android可以访问,即启动完成,启动之后不能关闭;

4、安装app

  react-native run-android

  在输入此命令前,要先打开模拟器,或连接真机,第一次启动非常慢,需要下载gradle,也可以手动下载gradle安装。

  以下为扩展内容(可忽略):

    如果安装失败,或者不想等太长时间,点击:

    http://download.csdn.net/detail/qq_25837957/9617009?web=web下载,放入C:\Users\用户名\.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv

    如果手动安装需要执行:react-native run-android重新启动;

5、运行调试app

  本人用的是Visual Studio Emulator for Android(模拟器)运行的,真机或其他模拟器相同,第一次运行会出现错误,如图:

  

  解决方案:设置IP和端口,具体操作,摇一摇手机,Visual Studio Emulator for Android(模拟器)如图:

  

  点击Dev Settings后,点击Debug server host & port for device,设置IP和端口,这个时候返回是空白,再次点击摇一摇,选择Reload JS程序就显示出来了,如图:

  

------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------

三、扩展知识(重要):每次修改完程序都要摇一摇Reload很麻烦,这个时候有一个很方便的做法开启热加载,改动完之后,即可在app自动更新,设置如图:

  

设置完之后,就可以愉快的编写代码了,所编即所得的及时反馈,着实好用,也大大节省了调试成本!

更多详情,请移驾:http://reactnative.cn/docs/0.45/getting-started.html

时间: 2024-10-02 22:57:43

逻辑性最强的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 | 环境搭建(在模拟器上运行)

我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,出错原因主要是node java python c++  sdk 环境有问题,或者就是自己没有科学上网(你懂),网络有问题,导致了安装失败 至于如何安node java python c++ react-native-cli Android  sdk 我就不那么详细的说了,我主要说下我碰见的问题,想了解具体如何解决,点击这,还有这 node node wi

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的优点:跨平台 低投入高回报 性能高 支持动态更新.一才两用(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不能刷新怎么解决? 设置连接电脑键盘即

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

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

Mac中搭建 iOS 的 React Native 环境

手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这不是废话?我所用的是Air~~穷..) 2.我所操作的电脑系统环境是 3.xcode版本:8.0正式版 必需的软件 1.Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. 打开终端,执行 /usr/bin/ruby -e "$(curl -fs