最近有空研究了一下使用taro
来进行react-native
的开发。按照taro
官网的教程一步步创建项目,坑还是比较多的。taro rn
提供了两种创建项目的方式。集成模式
和分离模式
。为什么要用taro
来开发react-native
项目呢。其实还是看中了taro
提供大量的常用的API
。方便在开发的时候进行快速调用,而不用一个个库的去集成,也避免了各个库之间产生冲突。
分离模式
js
项目代码和原生项目分离,打包的时候需要输出js
项目工程到壳工程进行打包。开发的时候需要配合Taro Playground 来进行开发。即开发完成之后通过Taro Playground
扫二维码进行预览。
集成模式
js
项目代码和原生项目代码集成在一起。我比较喜欢这种方式,这样也方便我们自己添加三方依赖库。添加了三方依赖库之后重新打包运行就能看到效果。和react-native
的开发方式没太大区别。
使用集成模式开发项目
-
初始化一个
taro rn
项目bashnpx @tarojs/cli init taro-rn-demo
-
参考下图选择依赖
-
项目初始化完毕之后执行下面的
bash
命令bashyarn install // 安装依赖 这儿一定要用yarn安装,不要用npm或者其他的依赖包安装 yarn upgradePeerdeps // 升级依赖
-
在
Mac
系统上完成上面的步骤运行npm run android
或者npm run iOS
。应该就可以正常启动了,但是在window
上运行npm run android
可能会出现如下报错bashCould not read script 'E:\textCode\myapp\scripts\autolinking.gradle' as it does not exist.
解决方案:
bashyarn 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
为国内镜像bashdistributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-7.5.1-all.zip
其他错误合集
-
执行
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 依赖 } }