通过使用讯飞SDK实现语音听写功能。
appid是第三方应用集成讯飞开放平台SDK的身份标识，由于SDK静态库和appid是绑定的，每款应用必须保持唯一，所以这里需要用户自己下载对应的SDK。
参考：http://www.xfyun.cn/sdk/dispatcher
参考：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
左侧目录中选中工程名，在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
在Xcode 7,8默认开启了Bitcode，而Bitcode需要工程依赖的所有类库同时支持。MSC SDK暂时还不支持Bitcode，可以先临时关闭。关闭此设置，只需在Targets - Build Settings中搜索Bitcode即可，找到相应选项，设置为NO。
iOS 10发布以来，苹果为了用户信息安全，加入隐私权限设置机制，让用户来选择是否允许。
隐私权限配置可在info.plist新增相关privacy字段，MSC SDK中需要用到的权限主要包括麦克风权限、联系人权限和地理位置权限：
NSMicrophoneUsageDescription NSLocationUsageDescription NSLocationAlwaysUsageDescription NSContactsUsageDescription
| Event Name | Returns | Notes |
|---|---|---|
| registerApp | null | 注册应用 |
| startSpeechRecognizer | null | 开始识别 |
| stopSpeechRecognizer | null | 停止识别 |
| cancelSpeechRecognizer | null | 取消识别 |
| finishSpeechRecognizer | result | 识别结束监听事件 |
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'
},
});
效果展示:
