@nativescript/rive

Rive for NativeScript

npm install @nativescript/rive

使用方法

您可以配置 iOS 和 Android 以使用 Rive。

iOS

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

ios: {
    SPMPackages: [
        {
            name: 'RiveRuntime',
            libs: ['RiveRuntime'],
            repositoryURL: 'https://github.com/rive-app/rive-ios.git',
            version: '5.7.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>

Gradle 设置

您需要针对 Android 34 或更高版本。在 android 部分内添加此内容到您的 app.gradle

android {
  compileSdkVersion 34
  buildToolsVersion "34.0.0"
  defaultConfig {
    minSdkVersion 24
    targetSdkVersion 34
    // ...
  }

确保您的 gradle 设置已配置为使用 Kotlin，通过添加一个 gradle.properties 文件（紧挨着您的 app.gradle）并包含以下内容

useKotlin=true

RiveView

使用 RiveView

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:rive="@nativescript/rive">
    <GridLayout>
        <rive:RiveView src="~/assets/rive/icons.riv" width="300" height="300" autoPlay="true"/>
    </GridLayout>
</Page>

当使用 flavor 时，您可以在您的 markup 中注册元素以供使用

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 />

使用状态机

您可以指定画板、状态机、输入以及 inputValue（boolean）。

<RiveView src="~/assets/rive/icons.riv" artboard="CHAT" stateMachine="CHAT_Interactivity" input="active" [inputValue]="inputValue" width="300" height="300" autoPlay="true" />

触发状态变化

您也可以通过 RiveView 实例触发状态变化，例如

<RiveView src="~/assets/rive/icons.riv" (loaded)="loadedRive($event)" />

现在您可以使用该实例在任何时候触发状态变化

let rive: RiveView;
function loadedRive(args) {
    rive = args.object;
    rive.triggerInputValue(name, value);
}

故障排除

当配置您的 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"
}

许可证

Apache License Version 2.0