React Native Voice库技术文档

田廷珉

于 2024-10-18 10:31:33 发布

阅读量1k

点赞数 23

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01260/article/details/143036456

React Native Voice库技术文档

voice :microphone: React Native Voice Recognition library for iOS and Android (Online and Offline Support) 项目地址: https://gitcode.com/gh_mirrors/voi/voice

React Native Voice是一个强大的语音转文本库，专为React Native应用设计。它允许开发者在Android和iOS平台上轻松集成语音识别功能。本文档将指导您完成从安装到深入使用的全过程。

安装指南

要开始使用React Native Voice，首先确保您的环境配置完毕，支持React Native开发。然后，通过以下命令添加此库：

yarn add @react-native-voice/voice
# 或者，如果您更倾向于使用npm
npm install @react-native-voice/voice --save

对于iOS项目，安装后还需要执行额外步骤：

npx pod-install

项目链接

React Native Voice需要与原生代码进行链接。对于最新版本的React Native和Expo（非 Expo Go），这通常通过自动链接完成，但手动链接步骤仍然适用特定情况。

自动链接

执行：

react-native link @react-native-voice/voice

若需手动操作：

手动链接Android

在android/settings.gradle中加入引用。
更新android/app/build.gradle中的依赖。
在MainApplication.java内添加相应的VoicePackage。

手动链接iOS

拖拽Voice.xcodeproj到Xcode的Libraries，并调整项目设置以包含此库。

预构建插件（适用于非Expo Go）

对于使用自定义原生代码的项目，更新app.json，添加预构建插件配置：

{
  "expo": {
    "plugins": ["@react-native-voice/voice"]
  }
}

遵循“Adding custom native code”指南来重建应用程序。

使用说明

查看位于仓库中的完整示例，涵盖了Android与iOS的基本用法。
创建组件并注册事件处理程序，例如启动监听、处理语音开始、结束、结果等。

import Voice from '@react-native-voice/voice';
import React, { Component } from 'react';

class VoiceTest extends Component {
  constructor(props) {
    super(props);
    Voice.onSpeechStart = this.onSpeechStart.bind(this);
    // 注册其他事件处理函数...
  }

  onStartButtonPress = async () => {
    try {
      await Voice.start('en-US');
    } catch (error) {
      console.log(error);
    }
  };

  // 实现其他方法如onSpeechStart, onSpeechEnd等...

}

export default VoiceTest;