在windows上进行taro Android开发最近有空研究了一下使用taro来进行react-native的开发。按

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

分离模式

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

集成模式

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

使用集成模式开发项目

初始化一个taro rn项目

npx @tarojs/cli init taro-rn-demo

# 如果上面的命令下载模板失败，可以试一试下面的命令。目前官方gitee上面的模板不是最新。下载下来安装依赖会报错
npx @tarojs/cli init taro-rn-demo --template-source direct:https://gitee.com/superscore/taro-project-templates.git#v3.6-rs

参考下图选择依赖

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

yarn install // 安装依赖 这儿一定要用yarn安装，不要用npm或者其他的依赖包安装
yarn upgradePeerdeps // 升级依赖

在Mac系统上完成上面的步骤运行npm run android或者npm run iOS。应该就可以正常启动了，但是在window上运行npm run android可能会出现如下报错

Could not read script 'E:\textCode\myapp\scripts\autolinking.gradle' as it does not exist.

解决方案：

yarn add expo@47.0.9 // 安装expo 依赖库。

确认android\app\src\main\java\com\tarodemo\newarchitecture\modules\MainApplicationTurboModuleManagerDelegate.java路径是否有这个java文件。没有手动加上

package com.tarodemo.newarchitecture.modules;

import com.facebook.jni.HybridData;
import com.facebook.react.ReactPackage;
import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.soloader.SoLoader;
import java.util.List;

/**
 * Class responsible to load the TurboModules. This class has native methods and needs a
 * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
 * folder for you).
 *
 * <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
 * `newArchEnabled` property). Is ignored otherwise.
 */
public class MainApplicationTurboModuleManagerDelegate
    extends ReactPackageTurboModuleManagerDelegate {

  private static volatile boolean sIsSoLibraryLoaded;

  protected MainApplicationTurboModuleManagerDelegate(
      ReactApplicationContext reactApplicationContext, List<ReactPackage> packages) {
    super(reactApplicationContext, packages);
  }

  protected native HybridData initHybrid();

  native boolean canCreateTurboModule(String moduleName);

  public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder {
    protected MainApplicationTurboModuleManagerDelegate build(
        ReactApplicationContext context, List<ReactPackage> packages) {
      return new MainApplicationTurboModuleManagerDelegate(context, packages);
    }
  }

  @Override
  protected synchronized void maybeLoadOtherSoLibraries() {
    if (!sIsSoLibraryLoaded) {
      // If you change the name of your application .so file in the Android.mk file,
      // make sure you update the name here as well.
      SoLoader.loadLibrary("tarodemo_appmodules");
      sIsSoLibraryLoaded = true;
    }
  }
}

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

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

distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-7.5.1-all.zip

最终运行效果图

其他错误合集

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

// 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 依赖
    }
}

在打包的时候可能会存在在github上下载资源,所以尽量保证科学上网

// 在这个文件里面有github 上下载的资源。如果下载失败可以自己下载到本地，然后替换成本地地址。下面是我改后的地址
taro-rn-demo/node_modules/expo-modules-core/android/ExpoModulesCorePlugin.gradle