开发者问题收集

react-native-voice 和 config-plugin

2022-12-21
725

我正在使用 React Native 和 expo 开发移动应用程序,我需要实现一个功能来记录和转录对着麦克风说的话。 我尝试了很多解决方案,但都没有真正起作用,唯一一个似乎接近的解决方案是 @react-native-voice/voice。

我安装了 @react-native-voice/voice: npm i @react-native-voice/voice

我的代码:

import { View, StyleSheet, Image, Text, Button } from "react-native";
import { NativeBaseProvider } from "native-base";
import { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import Voice from "@react-native-voice/voice";

const App = () => {
  let [started, setStarted] = useState(false);
  let [results, setResults] = useState([]);

  useEffect(() => {
    Voice.onSpeechError = onSpeechError;
    Voice.onSpeechResults = onSpeechResults;

    return () => {
      Voice.destroy().then(Voice.removeAllListeners);
    };
  }, []);

  const startSpeechToText = async () => {
    await Voice.start("en-NZ");
    setStarted(true);
  };

  const stopSpeechToText = async () => {
    await Voice.stop();
    setStarted(false);
  };

  const onSpeechResults = (result) => {
    setResults(result.value);
  };

  const onSpeechError = (error) => {
    console.log(error);
  };

  return (
    <NativeBaseProvider>
      <View style={styles.container}>
        {!started ? (
          <Button title="Start Speech to Text" onPress={startSpeechToText} />
        ) : undefined}
        {started ? (
          <Button title="Stop Speech to Text" onPress={stopSpeechToText} />
        ) : undefined}
        {results.map((result, index) => (
          <Text key={index}>{result}</Text>
        ))}
        <StatusBar style="auto" />
      </View>
    </NativeBaseProvider>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
export default App;

我启动我的应用程序,当我按下注册按钮时,它返回此错误:

[Unhandled promise rejection: TypeError: null is not an object (evaluating 'Voice.startSpeech')]

然后我启动 expo doctor 它返回:

Expected package @expo/config-plugins@^5.0.2 Found invalid: @expo/ [email protected]

我从未见过这种情况,也不知道,有人解决过类似的问题吗? @react-native-voice/voice 的所有版本都有 @expo/ [email protected]

2个回答

这似乎需要付出很多努力 ,但相信我,这非常简单,所以请耐心等待:

react-native-voice 无法与 expo 一起使用,您必须使用 EAS 构建系统才能使用此库。

首先安装库

expo install @react-native-voice/voice expo-dev-client

将插件值添加到 app.json

"plugins": [
      [
        "@react-native-voice/voice",
        {
          "microphonePermission": "Allow Voice to App_Name to access the microphone",
          "speechRecognitionPermission": "Allow Voice to App_Name to securely recognize user speech"
        }
      ]
    ],

如果您没有 eas,请继续安装

npm install -g eas-cli

然后登录到您的 expo 帐户

eas login 然后 eas build:configure

创建 eas.json 文件后,添加在 eas.json 文件中将 simulator:true 值添加到 build>development>ios 中,如下所示:

 "build": {
    "development": {
      "ios": {
        "simulator": true
      }

然后,您可以运行 eas build -p ios --profile development --local 来创建可以在模拟器上使用的开发版本。

此构建完成后,它将在项目根目录下创建一个 .tar 文件,只需双击 tar 文件并将导出的文件拖放到模拟器中即可。

mcnk
2023-01-09

我在 android 上遇到了同样的问题,我们仍在等待修复此问题

Shift App Team
2023-01-04