博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react native windows开发环境搭建(一)
阅读量:7094 次
发布时间:2019-06-28

本文共 1865 字,大约阅读时间需要 6 分钟。

ReactNative分为服务器端和手机端loader程序,Android版有3种代码:js代码,java代码和c++代码,主要是编写的是js代码,如果框架功能不足就需要编写原生的java代码来扩展,c++代码主要和js引擎有关,一般很少用到。

首先安装node.js服务器端,到node.js的网站上下载node.js然后安装上就可以了。

https://nodejs.org/en/

安装git,在执行命令的时候,需要通过git到github上去下载相关的文件。

下载地址如下:

http://rj.baidu.com/soft/detail/30195.html

安装时主要选择将git加入到命令行中 ,安装好之后命令行中就有git命令。

 

安装react-native-cli,命令行下的react-native工具

使用git下载ReactNative的项目代码

git clone -b master https://github.com/facebook/react-native.git

切换到react-native-cli目录

cd react-native/react-native-cli

安装react-native-cli

npm install -g

安装好之后,可以命令行下就有react-native命令了

执行

react-native init AwesomeProject
等待一段时间后(较慢),创建react-native项目(不要改项目的名字)
创建完成执行 node node_modules\react-native\packager\packager.js 启动服务,本人在测试时windows下存在bug,需要修改一个文件。

在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)) {

修改后重新运行命令:node node_modules\react-native\packager\packager.js

在浏览器中打开http://localhost:8081/index.android.bundle?platform=android ,如果可以访问表示服务器端已经可以了,浏览器中访问时,刚才的命令行会显示进度。

谷歌内核的浏览器中打开http://localhost:8081/debugger-ui,下载插件后,根据提示可以调试应用。

运行安卓端apk程序

编译apk比较麻烦,后面再做介绍,为了方便起见这里提供已经编译好的apk,使用这个apk 前面init创建工程的使用名称保持一致:AwesomeProject。
apk下载地址:

http://git.oschina.net/zhJack/EasyReactNative/raw/master/AwesomeProject.apk

 

安装好apk后,按菜单键选择“Dev Settings”,设置ip地址,reload,就会看到Welcome界面。

没有菜单键的手机,摇晃手机就会出现菜单。

修改index.android.js中的代码,再次relaod,就会发现界面也会改变。

当然,这样并不能开发一个完整的应用,还需要能编译loader以便发布和扩展应用,后面在做介绍。

关于如何编写js代码,请参考api文档和以及示例程序。

另外,本人将持续更新ReactNative相关内容,最新内容请关注我的微信公众号zhaojieTec

有什么问题可以加我的qq:1115500401

 

转载于:https://www.cnblogs.com/zhaojietec/p/4853273.html

你可能感兴趣的文章
Spring Batch学习笔记
查看>>
asp.net mvc 如何在执行完某任务后返回原来页面
查看>>
Oracle: listener.ora 、sqlnet.ora 、tnsnames.ora的配置及例子
查看>>
ASP.NET 中 GridView(网格视图)的使用前台绑定
查看>>
Windows的本地时间(LocalTime)、系统时间(SystemTime)、格林威治时间(UTC-Time)、文件时间(FileTime)之间的转换...
查看>>
[转]XBRL应用软件分类
查看>>
C++ 文件的复制、删除、重命名
查看>>
Oracle Patch Set Update and Critical Patch Update April 2011 Released
查看>>
hdu 2189
查看>>
std::map, std::multimap, std::tr1::unordered_map 区别 - 笔记本 - 博客频道 - CSDN.NET
查看>>
/usr/bin/ld: cannot find -lxxx问题总结
查看>>
C 语言 restrict 关键字的使用
查看>>
ASP.NET 自定义成员资格提供程序 Part.4(使用自定义提供程序类)
查看>>
ASP.NET调用V3版本的Google Maps API
查看>>
苹果面试8大难题及答案
查看>>
.NET:动态代理的 “5 + 1” 模式
查看>>
《Java Concurrency》读书笔记,Java并发编程实践基础
查看>>
jQuery 2.0.3 源码分析Sizzle引擎 - 超级匹配
查看>>
ubuntu中查看各种设备和资源的命令汇总
查看>>
Chrome好用的扩展插件
查看>>