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

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

巴特西

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

最新文章

热门文章