拒绝访问 | www.she.vc | 百度云加速
请打开cookies.
此网站 (www.she.vc) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(385dfa-ua98).
重新安装浏览器，或使用别的浏览器在Windows下搭建React Native Android开发环境 - android-windows-react-native - ITkeyowrd
在Windows下搭建React Native Android开发环境
推荐：前言 最近发现React Native很强大，不仅可以跨android和iOS两大平台，而且对于后期界面更新还可以起到不小的作用，关键是开发出来的效果也很棒，直逼原生开发。
安装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 。也可选择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 // Unhandled 'error' event^ Error: spawn npm ENOENTat 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()方法推荐：ReactNative分为服务器端和手机端loader程序，Android版有3种代码：js代码，java代码和c++代码，主要是编写的是js代码，如果框架功能不足就需要编写原生的java代中，将 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) != currDcurrDir = 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 即可。===================================================================== 已按该教程搭建完成。以下是截图
推荐：现在为什么要学习react native 以及react native为什么现在会这么火,大家看看下面这篇文章 /question/ 一.环境搭建 在react nativ
安装JDK 从Java官网下载JDK并安装。请注意选择x86还是x64版本。 推荐将JDK的bin目录加入系统PATH环境变量。 安装Android SDK 可以单独安装Android SDK，也可以通过Eclipse ADT或者Android
相关阅读排行
相关内容推荐
5React-Native 与 Android 集成
请激活账号
为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品，请激活账号。
您的注册邮箱：
如果您没有收到激活邮件，请注意检查垃圾箱。从Samurai-Native框架开发谈React Native
发表于 16:16|
作者郭虹宇
摘要：F8大会的主题折射出一个非常重要的观点，未来Web前端开发与Native移动应用开发工程师的工作职责很可能会相互重叠，平台之间的边界不会太明显，还会产生更专注于跨平台App UI及交互构建的“全终端开发工程师”。
近一年移动开发领域最火的话题就是“Web与Native正在融合”，React Native的出现是推动融合的一个关键点。正如F8大会的主题“Bring modern web tech to mobile”，巨头们已经着手从上自下展开技术融合，Web App开发者们与Native App开发者们长年相互鄙视斗争的过程将要告一段落。Web App开发者们实在是受够了HTML5应用的诸多基础体验问题，如：加载时间长，用户体验差，动画效果弱等。Native App开发者则是对于变化的需求以及App Store审核时间无法平衡。因此，从React Native发布起，如一阵夏日凉风唤醒了沉睡的开发者，使得这类技术近期备受关注。React Native实现解决的是前端开发者可以使用相同的技术体系来解决跨平台应用开发的问题，并以创建HTML及CSS子集通过WebCore技术与原生结合构建出与体验上几乎无差别的App。一来HTML5原有痛点被消除，二来前端技术栈被保留，难道前端开发工程师的春天真的来了？Web与Native交叠：未来的全终端开发工程师F8大会的主题折射出一个非常重要的观点，未来可能Web前端开发工程师与Native移动应用开发工程师的工作职责会相互重叠，所持技能及开发环境会趋向于统一，平台之间的边界不会太明显，未来的几年可能会产生一种新的职位叫做“全终端开发工程师”，属于“全栈”系列的前半部分，他们会更专注于跨平台App的UI及交互构建，使多平台体验一致，从iOS App、Android App到HTML5 App的UI开发。就此方向，React Native才给出了一个大一统的口号：“Learn once，write everywhere”。为什么？想想就知道了。React Native其实并不算是新技术，以往BeeFramework（XML+CSS）、NativeScript（JS+CSS）等都有类似的实现，但它们只专注于Native平台并使用了一些非标准或不为前端开发者而熟知的技术。React Native思维最大的不同在于，基于ReactJS的知识体系，只要学过一次就可以写遍全平台，那么我们可以认为iOS只是一个开始（Facebook野心是巨大的）。React Native因何而来？React Native能够被设计并实现，我个人以为是得益于作者对于浏览器技术和Virtual DOM技术的深度技术思维及扩展，因为在基于此项技术的基本模型及模式建立好的情况下，架接于任何一个平台来实现将不再是难事。我们能够看到React Native中有类似于WebKit的影子，比如Shadow View和CSS Node。在内存中，这两种基本元素构建出能够表达UI结构的一种通用模型，那么在任何一个平台上只要遵循这个规则，都将可以描述出一个UI是“长什么样子”，有些类似于浏览器中的DOM Tree + Style Tree。基于此，React Native通过ReactJS又实现了一套平台无关的触控处理及数据绑定，这样将原来平台相关的代码抽离到了平台无关的JavaScript语言来实现，大大降低了React Native开发者对平台特性及语言的依赖。回顾浏览器的发展历史，从20年前Netscape发布了Navigator到如今的Chrome及Safari，浏览器内核的本质没有什么变化，输入进入的是UIML（如HTML），其核心WebCore帮你加载、解析、构建、计算出页面中每个元素结点上下级关系、位置、及样式。不幸的是，W3C对于HTML5标准的确立与推进也过于缓慢，而且标准与需求明显严重脱节，颇有些鸡肋之感。W3C几乎错失了在移动端的布局机会，甚至我们不清楚这帮大佬是不是真的有考虑Web技术在移动端发展的未来，让人不禁想问，为什么React Native这类技术不是由Google和Apple两大WebKit拥护者及手机操作系统开发商发起并实现的？未来又将如何？所以，此时必然会出现其他一些不甘寂寞的巨头浮出水面，给出答案。那就是，尝试重造足够好的轻量级WebCore，用于满足同时具有原生性能及体验，并也具有Web开发效率的全新技术。关于这一点，我觉得React Native偏离得有些远，Facebook最初更多的只是为了解决自己内部的需求，现在是想借ReactJS吸引更多的开发者来重造一个“通天塔”。自然，时间长了会出现两种结果，一种是Web与Native融合，另一种则是Web与Native分裂。而分裂的结果是，Facebook强行撕裂一些W3C身上对自己有利的肉，翻炒之后做成React这道菜。对于企业来说，全面换用React Native的时机还不够成熟，至少在Android版本推出后再看。笔者本人也看过React Native iOS的实现代码还有待改善。取精华去糟粕，Samurai-Native框架与React Native有哪些不同？最后，再说说我所开发的Native App框架Samurai-Native。与React-Native相反，Samurai-Native的理念是使Native开发者可以使用标准Web技术（HTML+CSS）解决跨平台UI开发的问题，已在Github上。Samurai-Native架构图Samurai-Native与React Native相比有着诸多不同，后者在Native部分拥有着很多已经让人无力吐槽的实现：&Text&不是UILabel或类似控件，而是drawRect，这样的问题是accessibility很差，无法选择复制粘帖，也无法实现富文本效果。&Text&不能嵌套，不能够使用Web开发者思维来构建文本段。&List&不是UITableView或UICollectionView，而是通过UIScrollView实现的简单列表，无法满足后续复杂需求。不能使用GestureRecognizer，而是由JS简单判断点击区域来实现手势识别。不能使用ResponderChain，事件机制只能使用ReactJS提供的方式。JSX：让人无法想像的历史倒退，W3C通过20年将 “布局、样式、数据” 三者分享，Facebook只花了几个月就能合并到一起了。CSS-layout，只支持Flex-Box，不支持Fluid（流式）布局。CSS不支持继承和叠加，不支持多Class。HTML标准标签均无法使用。Native API需要手动导出，当iOS系统升级时，可能会带来兼容性问题。控件必须继承自RCTView，并需要定义RCTViewManager，难以将现有控件为React-Native所用。全局hook了触屏事件，由root view转发给touch handler，再用60fps的timer刷新给ReactJS来处理，无法想像的实现方式……无法使用onclick，必须包裹一层&TouchableHighlight&，使布局结构变得极为复杂。需要使用Chrome调试App，而无法使用原生IDE，调试过程变得极为复杂。Samurai-Native的UI HTML示例代码因此，在开发Samurai-Native的过程中，笔者专门针对这些问题进行了改善，取React Native精华，让它们成为Samurai-Native中的优势：支持标准HTML；支持标准CSS；支持UITableView；支持UICollectionView；使用原生GestureRecognizer；使用原生ResponderChain；UI layout、style、data完全分离；支持Fluid布局；支持样式继承和叠加，支持多Class；支持部分标准HTML标签（有做取舍）；支持原生控件直接导入，只需要通过&YourView/& 标签命名即可；支持onclick、onpan、onswipe多种手势；使用Xcode调试。为什么选择HTML+CSS的组合，而不再使用类似于React-Native或BeeFramework的XML？主要原因是不想再造轮子。HTML经过20年的时间检验，已经足够成熟，是最好的复杂UI布局的描述语言。Samurai-Native工作流程图那么总结起来，Samurai-Native的终极目标是想做成一个标准的Web浏览器内核，来为开发者们提供一款W3C标准WebCore的跨平台UI解决方案，既能渲染Web页面，又能生成原生View树。通过私有浏览器内核技术（Objective-C编写）将HTML+CSS解析渲染成为Native View树，从而既有Web开发体验，又有不错的用户体验。（责编/唐小引）作者简介：郭虹宇（），有着近十年的移动App开发及架构经验。曾在腾讯无线部门做研发Leader，目前经营开源工作室Geek-Zoo Studio。CSDN移动将持续为您优选移动开发的精华内容，共同探讨移动开发的技术热点话题，涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面，如果您有想分享的技术、观点，可通过电子邮件（tangxy#csdn.net，请把#改成@）投稿。第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章react native是现在比较火的App开发技术。使用react native开发的朋友一般也会使用到facebook提出的Flux概念框架，而redux框架是使用的比较多的。
redux的一大原则是单一数据源，只存在唯一的state树，以前由于工具的缺失，react native查看不了state，刚使用redux的时候按照文档安装了chrome扩展，
也查看不了state树，每次都要自己打印出来看，比较麻烦。想来都说的是web的工具，今天找到了react-native的工具，可以远程调试redux。
使用的&&这个工具实现的。
首先，按照官方的文档安装依赖
npm install --save-dev remote-redux-devtools
npm install --save-dev remote-redux-devtools-on-debugger
然后，在项目的package.json里加入脚本命令
&scripts&: {
&postinstall&: &remotedev-debugger --hostname localhost --port 5678 --injectserver&
remotedev-debugger命令参数请查看官方文档
加完脚本命令执行
npm run postinstall
会替换掉./node_modules/react-native/local-cli/server/util/debugger.html
再然后修改store配置文件添加与远程工具的通讯，一般为configureStore.js
import { Platform } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import reducer from '../reducers';
export default function configureStore(initialState) {
const enhancer = compose(
applyMiddleware(thunk),
devTools({
name: Platform.OS,
hostname: 'localhost',
port: 5678
return createStore(reducer, initialState, enhancer);
最后，react-native start启动服务，在App的调试菜单里点击Debug JS打开调试界面或者手动在chrome里输入调试界面的网址
启动js server服务的时候会启动redux调试服务
remotedev-debugger的地址，按照官方的文档说的是如果是在真机上使用，地址需要是ip地址(未测试)我因为是手机的系统是安卓5.0，使用adb转发就行adb reverse tcp:5678 tcp:5678端口改成你配置的端口