8.7 版本发布—WinterCG 兼容性第一部分
了解更多

在 GitHub 上查看

@nativescript/rive ​

适用于 NativeScript 的 Rive

bash
npm install @nativescript/rive

用法 ​

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

iOS ​

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

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

Swift 包版本说明 ​

如果您遇到与指定版本相关的构建错误，如下所示

bash
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，请将此提供程序添加到 application 标签内的 AndroidManifest.xml 中

xml
<?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 中

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

确保您的 gradle 设置已配置为使用 Kotlin，方法是添加一个 gradle.properties 文件（位于 app.gradle 旁边），内容如下：

yml
useKotlin=true

RiveView ​

使用 RiveView

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

使用变体时，您可以在标记中注册该元素以供使用

ts
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。

xml
<RiveView />

使用状态机 ​

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

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

触发状态更改 ​

您还可以通过 RiveView 实例触发状态更改，例如

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

您现在可以使用该实例随时触发状态更改

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

故障排除 ​

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

潜在错误 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 ​

bash
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 部分

bash
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 ​

bash
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 许可证 2.0 版

上一页
选择器
下一页
共享通知委托