@linxai/music-visualization-native

React Native 端音乐可视化组件 - 基于 Rust 原生模块

安装

npm install @linxai/music-visualization-native three @react-three/fiber expo-gl

使用

import { AudioVisualizer } from '@linxai/music-visualization-native'
import { View, StyleSheet } from 'react-native'

function App() {
  return (
    <View style={styles.container}>
      <AudioVisualizer 
        type="spectrum-bars"
        sensitivity={1.5}
        style={styles.visualizer}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  visualizer: { flex: 1 },
})

原生模块设置

Android

1. 构建 Rust 库：

pnpm --filter @linxai/music-visualization-core build:android

2. 复制 .so 到项目：

cp -r packages/core/android/jniLibs packages/native/android/

3. 在 android/settings.gradle 添加：

include ':linxai-native'
project(':linxai-native').projectDir = new File(rootProject.projectDir, '../node_modules/@linxai/music-visualization-native/android')

4. 在 android/app/build.gradle 添加：

dependencies {
    implementation project(':linxai-native')
}

iOS

暂不支持，优先实现 Android。

API

与 @linxai/music-visualization-web 完全一致的 API

AudioVisualizer

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | 'geometric' \| 'spectrum-bars' | 'geometric' | 可视化类型 | | sensitivity | number | 1 | 灵敏度 (0-2) | | style | ViewStyle | - | 容器样式 |

性能

• 使用 Rust 原生模块进行 FFT 计算
• 60 FPS 流畅渲染
• 低内存占用