react native windows开发环境搭建(一)

时间:2021-05-14 19:51:49

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 windows开发环境搭建(一)

react native windows开发环境搭建(一)

安装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