react-native-xunfei-speechrecognizer外掛的使用(iOS)
功能:
通過使用訊飛SDK實現語音聽寫功能。
使用步驟
一、獲取appid並下載對應的SDK
appid
是第三方應用整合訊飛開放平臺SDK的身份標識,由於SDK靜態庫和appid
是繫結的,每款應用必須保持唯一,所以這裡需要使用者自己下載對應的SDK。
參考:http://www.xfyun.cn/sdk/dispatcher
二、連結xunfei庫
參考:https://reactnative.cn/docs/0.50/linking-libraries-ios.html#content
手動新增:
1、新增react-native-xunfei-speechrecognizer
外掛到你工程的node_modules
資料夾下
2、新增xunfei
庫中的.xcodeproj
檔案在你的工程中
3、點選你的主工程檔案,選擇Build Phases
,然後把剛才所新增進去的.xcodeproj
下的Products
資料夾中的靜態庫檔案(.a檔案),拖到Link Binary With Libraries
組內。
自動新增:
npm install react-native-xunfei-speechrecognizer --save
或
yarn add react-native-xunfei-speechrecognizer
react-native link
三、開發環境配置
參考:http://doc.xfyun.cn/msc_ios/302721
1、引入系統庫及第三方庫
左側目錄中選中工程名,在TARGETS->Build Phases-> Link Binary With Libaries
中點選“+”
按鈕,在彈出的視窗中查詢並選擇所需的庫(見下圖),單擊“Add”
按鈕,將庫檔案新增到工程中。
- iflyMSC.framework
- libz.tbd
- AVFoundation.framework
- SystemConfiguration.framework
- Foundation.framework
- CoreTelephony.framework
- AudioToolbox.framework
- UIKit.framework
- CoreLocation.framework
- Contacts.framework
- AddressBook.framework
- QuartzCore.framework
- CoreGraphics.framework
- libc++.tbd
- libicucore.tbd

2、設定Bitcode
在Xcode 7,8
預設開啟了Bitcode
,而Bitcode
需要工程依賴的所有類庫同時支援。MSC SDK
暫時還不支援Bitcode
,可以先臨時關閉。關閉此設定,只需在Targets - Build Settings
中搜尋Bitcode
即可,找到相應選項,設定為NO
。

3、使用者隱私許可權配置
iOS 10
釋出以來,蘋果為了使用者資訊保安,加入隱私許可權設定機制,讓使用者來選擇是否允許。
隱私許可權配置可在info.plist
新增相關privacy
欄位,MSC SDK
中需要用到的許可權主要包括麥克風許可權、聯絡人許可權和地理位置許可權:
<key>NSMicrophoneUsageDescription</key>
<string></string>
<key>NSLocationUsageDescription</key>
<string></string>
<key>NSLocationAlwaysUsageDescription</key>
<string></string>
<key>NSContactsUsageDescription</key>
<string></string>
四、簡單使用
方法
Event Name | Returns | Notes |
---|---|---|
registerApp | null | 註冊應用 |
startSpeechRecognizer | null | 開始識別 |
stopSpeechRecognizer | null | 停止識別 |
cancelSpeechRecognizer | null | 取消識別 |
finishSpeechRecognizer | result | 識別結束監聽事件 |
js檔案
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Dimensions,
Alert,
ScrollView,
TouchableHighlight,
NativeEventEmitter
} from 'react-native';
import XunFei from 'react-native-xunfei-speechrecognizer';
let appid = '5a531707';
function show(title, msg) {
AlertIOS.alert(title+'', msg+'');
}
export default class App extends Component<{}> {
constructor(props: Object) {
super(props)
this.state = {
value: '',
}
}
componentDidMount() {
this.registerApp();
const XunFeiEmitter = new NativeEventEmitter(XunFei);
const subscription = XunFeiEmitter.addListener(
'finishSpeechRecognizer',
(response) => {
this.setState({
value: response.result,
});
}
);
}
componentWillUnmount(){
//取消訂閱
subscription.remove();
}
//註冊應用
registerApp() {
XunFei.registerApp(appid);
}
//開始識別
startSpeechRecognizer() {
XunFei.startSpeechRecognizer();
}
//停止識別
stopSpeechRecognizer() {
XunFei.stopSpeechRecognizer();
}
//取消識別
cancelSpeechRecognizer() {
XunFei.cancelSpeechRecognizer();
}
render() {
return (
<ScrollView contentContainerStyle={styles.wrapper}>
<Text style={styles.pageTitle}>{this.state.value}</Text>
<TouchableHighlight
style={styles.button} underlayColor="#f38"
onPress={this.registerApp}>
<Text style={styles.buttonTitle}>registerApp</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.button} underlayColor="#f38"
onPress={this.startSpeechRecognizer}>
<Text style={styles.buttonTitle}>startSpeechRecognizer</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.button} underlayColor="#f38"
onPress={this.stopSpeechRecognizer}>
<Text style={styles.buttonTitle}>stopSpeechRecognizer</Text>
</TouchableHighlight>
<TouchableHighlight
style={styles.button} underlayColor="#f38"
onPress={this.cancelSpeechRecognizer}>
<Text style={styles.buttonTitle}>cancelSpeechRecognizer</Text>
</TouchableHighlight>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
wrapper: {
paddingTop: 60,
paddingBottom: 20,
alignItems: 'center',
},
pageTitle: {
paddingBottom: 40
},
button: {
width: 200,
height: 40,
marginBottom: 10,
borderRadius: 6,
backgroundColor: '#f38',
alignItems: 'center',
justifyContent: 'center',
},
buttonTitle: {
fontSize: 16,
color: '#fff'
},
});
效果展示:

github連結:
https://github.com/zhoumeitong/react-native-xunfei-speechrecognizer
相關文章
- 使用podspec建立iOS外掛iOS
- HtmlWebpackPlugin外掛和HtmlWebpackInlineSourcePlugin外掛的使用HTMLWebPlugininline
- fastadmin的【外掛管理】外掛使用教程AST
- Flutter之初識iOS外掛FlutteriOS
- burp外掛的使用
- Headshot外掛如何使用?Headshot外掛使用教程
- iOS 通知擴充套件外掛iOS套件
- iOS桌面小外掛 Widget ExtensioniOS
- iOS外掛化架構探索iOS架構
- Flutter外掛開發---iOS篇FlutteriOS
- apisix~限流外掛的使用API
- Cordova學習--iOS自定義外掛iOS
- Flutter外掛iOS端開發教程FlutteriOS
- videojs外掛使用IDEJS
- Head 外掛使用
- 我使用的 Sublime Text 外掛
- mybatisPlus分頁外掛的使用MyBatis
- Flutter 外掛的建立及使用Flutter
- Eclipse安裝lombok外掛及外掛使用案例EclipseLombok
- IntelliJ IDEA 外掛Rest Client 外掛使用過程遇到的問題IntelliJIdeaRESTclient
- IDEA使用lombok外掛IdeaLombok
- 使用 VSCode Remote 外掛VSCodeREM
- vscode外掛使用包VSCode
- SpringBoot中分頁外掛PageHelper的使用Spring Boot
- Postcat IDEA 外掛,最全的使用教程Idea
- 使用CodeMirror外掛遇到的問題
- webpack(9)plugin外掛功能的使用WebPlugin
- IDEA的JRebel外掛使用詳解Idea
- [外掛推薦] 使用 PHPStorm 中的 Laravel Plugin 外掛提升開發效率PHPORMLaravelPlugin
- iOS持續整合(三)——fastlane 自定義外掛iOSAST
- iOS--React Native網路請求外掛iOSReact Native
- 工具篇---xcode外掛使用XCode
- Windows下使用ideagit外掛WindowsIdeaGit
- Androidstudio adb wifi外掛使用AndroidWiFi
- Vue-router外掛使用Vue
- flask 外掛使用方法Flask
- 外掛如何呼叫本外掛的View?View
- fastclick外掛的使用--移動端vue專案開發(vue常用外掛)ASTVue
- 小程式外掛的開發和使用