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