加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react native for android

发布时间:2020-12-15 05:23:41 所属栏目:百科 来源:网络整理
导读:转载地址: 在Windows下搭建React Native Android开发环境 http://my.oschina.net/jackzlz/blog/508210 React Native 开发环境部署 http://www.iinterest.net/2015/09/20/react-native-android-ios/ React Native for Android 入门老虎 http://www.race604.co
转载地址:

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

http://my.oschina.net/jackzlz/blog/508210

React Native 开发环境部署

http://www.iinterest.net/2015/09/20/react-native-android-ios/

React Native for Android 入门老虎

http://www.race604.com/react-native-for-android-start/

React Native: Android 的打包

http://www.liaohuqiu.net/cn/posts/react-native-android-package/

  • 安装JDK
  • 安装Android SDK
  • 安装C++环境
  • 安装node.js
  • 安装react-native命令行工具
  • 创建项目
  • 运行packager
  • 运行模拟器
  • 安卓运行
  • 安卓调试
  • 安装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 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

    安装node.js

    从官网下载node.js的官方4.1版本或更高版本。

    安装react-native命令行工具

    官方的安装方法是

    npminstall-greact-native-cli

    但是由于npm上的版本在windows下存在BUG,因此需要安装github上的master支线,否则会在下一步骤报以下错误:

    ThiswillwalkyouthroughcreatinganewReactNativeprojectin***events.js:141thrower;//Unhandled'error'event^Error:spawnnpmENOENTatexports._errnoException(util.js:837:11)atProcess.ChildProcess._handle.onexit(internal/child_process.js:178:32)atonErrorNT(internal/child_process.js:344:16)atdoNTCallback2(node.js:429:9)atprocess._tickCallback(node.js:343:17)atFunction.Module.runMain(module.js:477:11)atstartup(node.js:117:18)atnode.js:951:3

    如果您看到本文时0.12已经发布,那很可能直接输入上面的命令就行了。如果0.12还没有发布,请进行以下步骤:

    在React Native的Github页面右侧点击Download ZIP,下载后解压,并执行以下代码:

    cd**解压的目录**cdreact-native-clinpminstall-g

    创建项目

    进入你的工作目录,运行

    react-nativeinitMyProject

    并耐心等待数分钟。

    运行packager

    首先要修复package在windows下的两处BUG。

    1、参考这个commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/Module.js的getName()方法中,将

    returnpath.join(name,path.relative(p.root,this.path));

    修改为

     注意,如果你在修改此行代码之前运行过packager,那你可能需要去C:Users你的用户名AppDataLocalTemp中找到并删除所有 react-packager-cache 开头的文件。

    2、参考这个commit,在node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js的_resolveNodeDependency(fromModule,toModuleName)方法中,将

    for(letcurrDir=path.dirname(fromModule.path);currDir!=='/';currDir=path.dirname(currDir)){

    for(letcurrDir=path.dirname(fromModule.path);path.dirname(currDir)!=currDir;currDir=path.dirname(currDir)){

    随后可以运行packager。

    如果你有cygwin,可以在cygwin环境中进入工程目录,运行

    npmstart

    如果没有cygwin或不在cygwin环境中,可以进入工程目录,运行

    nodenode_modulesreact-nativepackagerpackager.js

    可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒,并且在packager的命令行可以看到进度条。如果迟迟看不到进度条,请检查上面的修改是否已经做到。

    运行模拟器

    推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。

    如果有真机,可以不必运行模拟器,要配置好驱动,使得adb devices可以看到对应的设备。

    安卓运行

    保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

    react-nativerun-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即可。


    =====================================================================

    已按该教程搭建完成。以下是截图

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读