在windows上进行taro Android开发

最近有空研究了一下使用taro来进行react-native的开发。按照taro官网的教程一步步创建项目,坑还是比较多的。taro rn提供了两种创建项目的方式。集成模式和分离模式。为什么要用taro来开发react-native项目呢。其实还是看中了taro提供大量的常用的API。方便在开发的时候进行快速调用,而不用一个个库的去集成,也避免了各个库之间产生冲突。

分离模式

js项目代码和原生项目分离,打包的时候需要输出js项目工程到壳工程进行打包。开发的时候需要配合Taro Playground 来进行开发。即开发完成之后通过Taro Playground扫二维码进行预览。

集成模式

js项目代码和原生项目代码集成在一起。我比较喜欢这种方式,这样也方便我们自己添加三方依赖库。添加了三方依赖库之后重新打包运行就能看到效果。和react-native的开发方式没太大区别。

使用集成模式开发项目

  1. 初始化一个taro rn项目

    bash 复制代码
    npx @tarojs/cli init taro-rn-demo
  2. 参考下图选择依赖

  3. 项目初始化完毕之后执行下面的bash命令

    bash 复制代码
    yarn install // 安装依赖 这儿一定要用yarn安装,不要用npm或者其他的依赖包安装
    yarn upgradePeerdeps // 升级依赖
  4. 在Mac系统上完成上面的步骤运行npm run android或者npm run iOS。应该就可以正常启动了,但是在window上运行npm run android可能会出现如下报错

    bash 复制代码
    Could not read script 'E:\textCode\myapp\scripts\autolinking.gradle' as it does not exist. 

    解决方案:

    bash 复制代码
    yarn add expo@47.0.9 // 安装expo 依赖库。

    expo和react-native版本有对应关系。参考下图,所以安装expo的时候尽量安装和react-native版本相匹配的expo

    等待安装完成之后再次执行npm run android就可以正常启动了。如果gradle下载慢的话可以替换taro-rn-demo/android/gradle/wrapper/gradle-wrapper.properties文件里面的distributionUrl为国内镜像

    bash 复制代码
    distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-7.5.1-all.zip

其他错误合集

  1. 执行npm run android出现Plugin with id 'kotlin-android' not found.

    bash 复制代码
    // taro-rn-demo/android/build.gradle 添加如下两行代码
    buildscript {
        ext {
            kotlin_version = '1.6.21' // 添加 kotlin-android 版本
            buildToolsVersion = "31.0.0"
            minSdkVersion = 21
            compileSdkVersion = 31
            targetSdkVersion = 31
    
            if (System.properties['os.arch'] == "aarch64") {
                ndkVersion = "24.0.8215888"
            } else {
                ndkVersion = "21.4.7075529"
            }
        }
        repositories {
            maven { url 'https://maven.aliyun.com/repository/public' }
            maven { url 'https://maven.aliyun.com/repository/google' }
            maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
            google()
            mavenCentral()
        }
        dependencies {
            classpath("com.android.tools.build:gradle:7.2.1")
            classpath("com.facebook.react:react-native-gradle-plugin")
            classpath("de.undercouch:gradle-download-task:5.0.1")
            classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" // 添加kotlin-android 依赖
        }
    }
相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端