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://www.git-scm.com/downloads
安装好之后命令行中就有git命令。

安装react-native-cli,命令行下的react-native工具
使用git下载ReactNative的项目代码
git clone 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下载地址:

安装好apk后,按菜单键选择“Dev Settings”,设置ip地址,reload,就会看到Welcome界面。
没有菜单键的手机,摇晃手机就会出现菜单。

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

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

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

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

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

时间: 2024-12-16 19:25:19

react native windows开发环境搭建(一)的相关文章

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

上一篇中介绍了本地服务器端环境的安装,使用已经编译好的apk程序,设置ip地址,就可以看到welcome界面,并且可以对程序做出修改以及调试. 为了扩展和发布应用 还需要能编译loader程序,这里介绍如何编译loader程序,实际上就是编译Android程序. ReactNative生成的项目是采用grader编译,eclipse无法编译,需要使用命令行或者导入android studio或者IntelliJ IDEA,这里将项目导入android studio. 1.首先如果没有安装jdk,

React Native IOS ---基础环境搭建(前端架构师)

React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜像 npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global Yarn.React Native 的命令行工

react-native —— 在Mac上配置React Native Android开发环境排坑总结

配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Preferences/AndroidStudio* rm ~/Library/Preferences/com.google.android.studio.plist rm -Rf ~/Library/Application\ Support/A

Spark+ECLIPSE+JAVA+MAVEN windows开发环境搭建及入门实例【附详细代码】

http://blog.csdn.net/xiefu5hh/article/details/51707529 Spark+ECLIPSE+JAVA+MAVEN windows开发环境搭建及入门实例[附详细代码] 标签: SparkECLIPSEJAVAMAVENwindows 2016-06-18 22:35 405人阅读 评论(0) 收藏 举报  分类: spark(5)  版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 前言 本文旨在记录初学Spark时,根据官网快速

Go语言-Windows开发环境搭建

由于实验室项目的需要,我今天开始学Go语言. 首先介绍Go语言开发环境的搭建,我的环境是在Windows下搭建,Go语言包推荐.msi安装包,我用的是go1.3.windows-386.msi ,原因很简单,.msi安装会自动配置环境变量,当然也可以用.zip包然后自己配置环境变量.IDE开发环境有两种选择:一是liteIDE,另一个是给eclipse下载goclipse插件.我选择的是liteIDE,下面我介绍下我今天搭建Go开发环境的小小经验总结... 1.下载Go语言安装包. 地址:htt

基于QT 5.7.0 for Android 的 Windows 开发环境搭建

基于QT 5.7.0 for Android 的 Windows 开发环境搭建 本文属于转载原文地址https://my.oschina.net/armsky/blog/740645 一.下载软件1.jdk:jdk-8u102-windows-i586.exehttp://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htmlhttp://download.oracle.com/otn-pub/ja

PyCUDA的Windows开发环境搭建

PyCUDA的开发环境搭建 PyCUDA需要python的Boost库和Numpy库(1.0.4以上),和CUDA开发环境(2.0以上). Windows64环境下所需要的包可以到以下网址直接下载, http://www.lfd.uci.edu/~gohlke/pythonlibs/#boost.python. 另外PyCUDA还需要pytools库,而pytools库又需要six,appdirs,decorator这三个库,这三个库都可以通过easy_install工具直接安装,安装完这三个库

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

http://my.oschina.net/jackzlz/blog/508210 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变量. 安装Android SDK 可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装.推荐使用Android Studio,以下说明会默认以Android Studio的方式说明.请注意选择x86还是x64版本. 为了加速下载,推荐从

手把手教你在Windows下搭建React Native Android开发环境

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的) react-native的GitHub地址:https://github.com/facebook/react-native react-native的文档地址:http://facebook.github.io/react-native/docs/getting-started.html 1.