🤘 在 NativeScript 中使用 Rive 摇滚起来

Rive 允许你“构建可以在任何地方运行的交互式动画”。它们确实速度极快、体积小巧，并且“专为运行时而设计”。了解更多以了解 Rive 的目标和解决问题，并享受探索来自充满活力的 Rive 社区的令人难以置信的创作。

让我们探索将来自 Rive 创建者（如 Bobbeh、@HelloJcToon、@PedroAlpera）的许多动画栩栩如生地呈现出来，其中包括来自 @gordonphayes 等人的灵感……

准备好用 Rive 了！
使用 .riv 文件
RiveView API
尽情享受用 Rive 摇滚吧！
故障排除和解决方案

准备好用 Rive 了！

让我们安装并设置我们的 iOS 和 Android 应用，以将 Rive 的功能提升到一个新的高度。

npm install @nativescript/rive

现在我们可以设置我们的应用配置来使用它。

配置 iOS

对于 iOS，请配置你的 nativescript.config.ts 以使用 Swift 包

ios: {
    SPMPackages: [
        {
            name: 'RiveRuntime',
            libs: ['RiveRuntime'],
            repositoryURL: 'https://github.com/rive-app/rive-ios.git',
            version: '5.0.0',
        },
    ],
},

Swift 包版本说明

如果你遇到与以下指定版本相关的构建错误

xcodebuild: error: Could not resolve package dependencies:
  Dependencies could not be resolved because no versions of 'rive-ios' match the requirement 5.1.12..<6.0.0 and root depends on 'rive-ios' 5.1.12..<6.0.0.

你可以使用基本主版本 5.0.0，而不是精确版本。它仍然会解析主版本系列中的最新版本。

配置 Android

对于 Android，请将此提供程序添加到你的 AndroidManifest.xml 的 application 标签内

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="__PACKAGE__"
    xmlns:tools="http://schemas.android.com/tools"> <!-- You may need to add this xmlns:tools attr/value -->
    ...

    <application
        android:name="com.tns.NativeScriptApplication"
        ...>

        <!-- Add this for Rive -->
        <provider
                android:name="androidx.startup.InitializationProvider"
                android:authorities="${applicationId}.androidx-startup"
                android:exported="false"
                tools:node="merge">
            <meta-data android:name="app.rive.runtime.kotlin.RiveInitializer"
                        android:value="androidx.startup" />
        </provider>

准备 RiveView 以供使用

使用 flavors 时，你可以在你的标记中注册元素以供使用

import { RiveView } from '@nativescript/rive'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('RiveView', () => RiveView)

// Solid
import { registerElement } from 'dominative';
registerElement('riveView', RiveView);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('riveView', () => RiveView);

// React
import { registerElement } from 'react-nativescript';
registerElement('riveView', () => RiveView);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('RiveView', () => RiveView)

在任何地方使用 RiveView。

<RiveView />

使用 .riv 文件

你可以通过以下方式使用 .riv 文件

(最常用的方式) -- 在你的 src/assets 中本地使用，通常称为 ~/assets/file.riv
通过 URL 远程使用，例如 https://cdn.rive.app/animations/vehicles.riv
通过 res://file.riv 使用 App_Resources

你可以在整个 Rive 社区中找到丰富的示例。

你可以使用丰富的 Rive 编辑器创建你自己的 .riv 文件。

RiveView API

你可以通过状态机触发输入，并通过视图绑定配置画板。

<RiveView 
  src="~/assets/file.riv" 
  artboard="artboard-name" 
  stateMachine="state-machine-name" 
  input="input-name" 
  inputValue="input-value-as-boolean-or-number" 
  autoPlay="true" 
  onStateChanged="state event handler"
/>

你也可以通过 RiveView 实例以编程方式触发输入。

riveView.triggerInputValue('CHAT', true);

尽情享受用 Rive 摇滚吧！

无论是在整个应用中应用微动画，还是考虑构建一个完整的交互式 UI，Rive 都提供了一些非常酷的功能供你使用。

通过 Rive 学习指南了解更多信息。

故障排除和解决方案

配置你的 Android 应用以使用 Rive 时，你可能会遇到以下问题。以下是一些解决方案。

潜在错误 1

Execution failed for task ':app:checkDebugDuplicateClasses'.
Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules jetified-kotlin-stdlib-1.8.21 (org.jetbrains.kotlin:kotlin-stdlib:1.8.21) and jetified-kotlin-stdlib-jdk8-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.6.21)
Duplicate class kotlin.internal.jdk7.JDK7PlatformImplementations found in modules jetified-kotlin-stdlib-1.8.21 (org.jetbrains.kotlin:kotlin-stdlib:1.8.21) and jetified-kotlin-stdlib-jdk7-1.6.21 (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.6.21)

解决方案

将以下依赖项约束添加到你的 app.gradle 的顶部，位于 android 部分之上

dependencies {
    constraints {
        implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.8.21" 
        implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.21"
    }
}

潜在错误 2

Execution failed for task ':app:mergeDebugNativeLibs'.
2 files found with path 'lib/arm64-v8a/libc++_shared.so' from inputs:
 - /Users/you/.gradle/caches/transforms-3/fed290951dd20dba6bd42d7106bb3f26/transformed/jetified-rive-android-8.1.3/jni/arm64-v8a/libc++_shared.so

解决方案

将此部分添加到 app.gradle 的 android 部分

android {
  …
  packagingOptions {
      pickFirst "lib/x86/libc++_shared.so"
      pickFirst "lib/x86_64/libc++_shared.so"
      pickFirst "lib/armeabi-v7a/libc++_shared.so"
      pickFirst "lib/arm64-v8a/libc++_shared.so"
  }
  …
}

潜在错误 3

This version (1.2.0-alpha05) of the Compose Compiler requires Kotlin version 1.6.10 but you appear to be using Kotlin version 1.7.10 which is not known to be compatible.  Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).

解决方案

在你的 app.gradle 旁边添加一个 before-plugins.gradle 文件，内容如下

ext {
    gradlePluginVersion = "7.3.1"
    kotlinVersion = "1.6.10"
}