React Native 环境搭建攻略

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android, 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。

近期闲来无事想搭建环境玩耍一下。现把遇到的问题总结一下希望对于新手有所帮助。

首先我运气很好得找到了极客学院翻译的中文版wiki于是按照下面的说明进行了搭建

PS: 文档详细内容请移步: (http://wiki.jikexueyuan.com/project/react-native/)

第一次搭建的时候由于对mac系统的不熟悉怎么都搞得不顺心,感觉这个命令好难用啊头痛。初次搭建时凑合能够打包安装但运行时遇到了好多的问题

问题一:真机上运行白屏

解决方法:

我的主力开发机器是 Android 4.4 的。按照官方文档,需要按 menu 键或者摇晃手机,在开发菜单中设置一下 dev server 的 IP 地址。前面我就试过了,我怎么操作都不能打开这个菜单。突然想到,是不是系统屏蔽了?我去找系统权限设置,发现如下:

问题2:Unable to download JS bundle.Did you forget to start the development server or connect your device?

真机与模拟器上都出现这样的问题,网上问了很多人也加群问了很多人最后锁定为server没有开启。

解决办法:对照了wiki教程重新走了一遍第一次搭建时各种软件安装得比较乱第二次有了第一次的经验再重新搭建一次把以前漏掉得步骤走了一遍再react-native run-andriod.模拟器成功跑通。

问题3:跑通了模拟哭再回头看看真机还是不行跟问题二差不多只是只有Unable to download JS bundle.这一句说明server启动起来了

解决办法:本来我是电脑与手机连接的一个wifi网络后来用电脑连接网线然后创建一个wifi手机再连接电脑创建的wifi然后菜单中选择Dev Settings->Debug server host for device,填入你开发电脑的 IP 地址。问题解决。现在模拟器手机都可以完美调试运行。

时间: 2024-10-15 19:34: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环境搭建与调试

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不能刷新怎么解决? 设置连接电脑键盘即

史上最详细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