react博文链接

http://nav.react-china.org/

在Windows下搭建React Native Android开发环境

安装JDK

Java官网下载JDK并安装。请注意选择x86还是x64版本。

推荐将JDK的bin目录加入系统PATH环境变量。

安装Android SDK

可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio,以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。

为了加速下载,推荐从AndroidDevTools下载。

然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager),确保以下项目已经安装并更新到最新:

  • Tools/Android SDK Tools (24.3.3)
  • Tools/Android SDK Platform-tools (22)
  • Tools/Android SDK Build-tools (23.0.1)
  • Android 6.0 (API 23)/SDK Platform (1)
  • Extras/Android Support Library(23.0.1)

推荐使用腾讯Bugly的镜像加速下载。查看说明

推荐将SDK的platform-tools子目录加入系统PATH环境变量。

安装C++环境

推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

安装node.js

官网下载node.js的官方4.1版本或更高版本。

安装react-native命令行工具

官方的安装方法是

npm install -g react-native-cli

但是由于npm上的版本在windows下存在BUG,因此需要安装github上的master支线,否则会在下一步骤报以下错误:

This will walk you through creating a new React Native project in ***events.js:141      throw er; // Unhandled ‘error‘ event      ^Error: spawn npm ENOENT    at exports._errnoException (util.js:837:11)    at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)    at onErrorNT (internal/child_process.js:344:16)    at doNTCallback2 (node.js:429:9)    at process._tickCallback (node.js:343:17)    at Function.Module.runMain (module.js:477:11)    at startup (node.js:117:18)    at node.js:951:3

如果您看到本文时0.12已经发布,那很可能直接输入上面的命令就行了。如果0.12还没有发布,请进行以下步骤:

React Native的Github页面右侧点击Download ZIP,下载后解压,并执行以下代码:

cd **解压的目录**cd react-native-cli npm install -g

创建项目

进入你的工作目录,运行

react-native init MyProject

并耐心等待数分钟。

运行packager

首先要修复package在windows下的两处BUG。

1、参考这个commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/Module.js的getName()方法中,将

return path.join(name, path.relative(p.root, this.path));

修改为

return path.join(name, path.relative(p.root, this.path)).replace(/\\/g, ‘/‘);

注意,如果你在修改此行代码之前运行过packager,那你可能需要去C:\Users\你的用户名\AppData\Local\Temp中找到并删除所有 react-packager-cache 开头的文件。

2、参考这个commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js的_resolveNodeDependency(fromModule, toModuleName)方法中,将

for (let currDir = path.dirname(fromModule.path);                currDir !== ‘/‘;                currDir = path.dirname(currDir)) {

修改为

for (let currDir = path.dirname(fromModule.path);                path.dirname(currDir) != currDir;                currDir = path.dirname(currDir)) {

随后可以运行packager。

如果你有cygwin,可以在cygwin环境中进入工程目录,运行

npm start

如果没有cygwin或不在cygwin环境中,可以进入工程目录,运行

node node_modules\react-native\packager\packager.js

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒,并且在packager的命令行可以看到进度条。如果迟迟看不到进度条,请检查上面的修改是否已经做到。

运行模拟器

推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。

如果有真机,可以不必运行模拟器,要配置好驱动,使得adb devices可以看到对应的设备。

安卓运行

保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果gradle依赖下载出现报错,请多试几次,或者设置VPN加速。

如果apk安装运行出现报错,请检查platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

至此,应该能看到APP运行,并报错 Unable to download JS bundle

摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的局域网IP,再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

安卓调试

目前Windows下无法自动打开chrome进行调试,所以手动打开chrome,访问如下地址:http://localhost:8081/debugger-ui 即可。

时间: 2024-12-20 01:08:54

react博文链接的相关文章

Flutter系列博文链接

Flutter系列博文链接 ↓: Flutter基础篇: Flutter基础篇(1)-- 跨平台开发框架和工具集锦 Flutter基础篇(2)-- 老司机用一篇博客带你快速熟悉Dart语法 Flutter基础篇(3)-- Flutter基础全面详解 Flutter基础篇(4)-- Flutter填坑全面总结 Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备 Flutter基础篇(6)-- 水平和垂直布局详解 Flutter进阶篇: Flutter进阶篇(1)--

一些博文链接

CSS浮动 http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html

博文链接收集【随机更新】

Linux 使用OpenLDAP 集中管理用户帐号      http://www.itdhz.com/archives/441 手把手教你使用git                  http://www.itdhz.com/archives/407 zabbix 安装过程                   http://www.itdhz.com/archives/397 linux网卡绑定的其中模式              http://www.itdhz.com/archives/3

atom react 插件

Atom编辑器折腾记_(23)加快React开发的插件汇总[浪一波] 标签: atomreact插件react开发atomreact 2016-08-13 00:53 10065人阅读 评论(1) 收藏 举报  分类: Atom折腾记(23)  版权声明:保留原博文链接及作者的情况下,请尽情转载吧!!! 目录(?)[+] 前言 汇总下比较实用的atom插件[偏react开发的]-- 暂时应该没有比我更全面的!嘎嘎 atom-react-autocomplete–项目内,组件名及状态的自动补全 

'React/RCTBundleURLProvider.h' file not found

'React/RCTBundleURLProvider.h' file not found 新建RN项目时在iOS端用xcode跑时有时会遇到 'React/RCTBundleURLProvider.h' file not found 错误,遇到这种错误一般有一下几种情况: 1. 没有执行 npm install 命令,没有安装依赖,此时执行 npm install 安装依赖即可. 2. 依赖已经安装,但还是会报这个错,此时将项目下node_modules文件夹删除,再次执行 npm insta

react redux 深入剖析--干货

## 技术栈: react + redux + webpack + react-router + ES6/7/8 + immutable ## 运行项目(nodejs 6.0+) ``` git clone https://github.com/bailicangdu/react-pxq.git cd react-pxq npm i 或者运行 yarn(推荐) npm start npm run build (发布)``` ## 说明 > 本项目主要用于理解 react 和 redux 的编译方

react+antdUI脚手架

概述这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目详细代码下载:http://www.demodashi.com/demo/12205.html 一.安装webstorm + Noje.js(全局安装)详细安装这里略过 二.全局安装create-react-app脚手架用管理员身份运行cmd,输入: npm install -g create-react-app yarn 成功! 三.创建React项目antd-demo1继

写了两篇文章,对于初学react+redux的人来说,很有好处

虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那我们就来拆解,一步一步实现,试想我们开发程序也是一个一个功能区域实现,那么我们第一步就是先把整体结构构思出来,然后先把头部做出来,这样看是不是简单很多! 将持续更新react+redux 链接1:http://www.cnblogs.com/heigehe/articles/6237362.html

网络采集软件核心技术剖析系列(1)---如何使用C#语言获取博客园某个博主的全部随笔链接及标题

一 本系列随笔概览及产生的背景 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受广大博客写作和阅读爱好者的喜爱.同时也不乏一些技术爱好者咨询我,这个软件里面各种实用的功能是如何实现的. 该软件使用.NET技术开发,为回馈社区,现将该软件中用到的核心技术,开辟一个专栏,写一个系列文章,以飨广大技术爱好者. 本系列文章除了讲解网络采编发用到的各种重要技术之外,也提供了不少问题的解决思路和界面开发的编程经验,非常适合.NET开发的初级,中级读者,希望大家多多支持. 很多初学者常有此类困惑,“为