构建 React 原生语音转文本听写应用

React Native 语音转文本功能是当今开发人员的常见用例。无论是一般用途还是辅助功能，项目中对语音转文本的需求都很可能在某个时候出现，这是我们作为开发人员应该准备在我们的应用程序中实现的功能。

本文将向您展示如何使用 React Native 构建语音转文本听写应用程序。

• 先决条件

• 安装和设置

• 构建用户界面

  • Home/index.tsx

  • Notes/index.tsx

• 集成语音识别库

  • hooks/useCreateNote.ts

  • hooks/useNotes.ts

最终演示

先决条件

• 节点.js

• 安卓工作室

• Xc颂歌

• VS 代码

要在 iOS 上运行应用程序，您需要 macOS 和 Xcode 来编译和运行模拟器。

对于 Android，您可以使用 Android Studio 中的 Android Emulator，或者只需连接 Android 设备即可运行它。此外，如何下载和更新IE浏览器？只需三步轻松解决我们还将使用 VS Code 来构建应用程序。

安装和设置

在使用 React Native 构建移动应用程序时，有两种典型的方法。

一个使用Expo——一套围绕React Native构建的工具，旨在提高开发效率。另一种方法是使用 React Native CLI，这基本上就像从头开始，没有任何支持React Native 开发的工具集。

在本教程中，我们将使用 Expo，因此开发过程更易于管理。

让我们开始吧：

npm install -g expo-cli

全局安装世博会 CLI 后，可以使用以下命令初始化项目：

expo init <Name of Project>

在这里，我们将选择一个具有 TypeScript 配置的空白项目。如果您愿意，您还可以创建具有一些预定义功能的JavaScript版本。

一旦它为项目搭建了基架，您就可以运行适用于 Android 或 iOS 的应用程序。导航到该目录并运行以下 npm 命令之一：

- cd SpeechToTextAppDemo
- npm run android
- npm run ios
- npm run web

正如您在文件夹结构中看到的，如何修复联想电源管理器不起作用？怎么打开电源管理器？ 是应用程序的入口点。 是一个世博会配置，用于配置项目加载和生成 Android 和 iOS 重建的方式。App.tsx``app.json

构建用户界面

上面显示的是一个简单的线框，我们将使用它来构建应用程序的 UI。

我们让它变得简单，因为我们想专注于功能 - 一旦我们构建了应用程序，您就可以根据需要对其进行自定义并在其上练习。

让我们首先在应用程序中构建导航。

要在 React Native 应用程序中实现导航，我们需要安装以下软件包：

npm install @react-navigation/bottom-tabs @react-navigation/native @expo/vector-icons

由于我们将在底部实现导航，因此我们需要安装 和 核心包。@react-navigation/bottom-tabs``@react-navigation/native

此外，要添加对图标和文本的支持，我们需要该包。@expo/vector-icons

对于导航，有三个组件：

1. NavigationContainer

2. Tab.Navigator

3. Tab.Screen

把所有东西都包在里面. 趣知笔记有助于在不同组件之间导航，同时呈现组件本身。NavigationContainerTab.NavigatorTab.Screen

现在，我们将更改 ，包括导航功能：App.tsx

import { StatusBar } from "expo-status-bar";
import { FontAwesome5 } from "@expo/vector-icons";
import { StyleSheet, Text, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import Home from "./components/Home";
import Notes from "./components/Notes";
const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: () => {
            let iconName = "record";
            if (route.name === "Record") {
              iconName = "record-vinyl";
            } else if (route.name === "History") {
              iconName = "history";
            }
            return <FontAwesome5 name={iconName} size={24} color="black" />;
          },
        })}
      >
        <Tab.Screen name="Record" component={Home} />
        <Tab.Screen name="History" component={Notes} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

通过添加以下代码创建 和 组件：Home``Notes

Home/index.tsx

import { useState, useEffect } from "react";
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  Button,
  Pressable,
} from "react-native";
export default function Home() {
  return (