React Native Open Call App - Javascript

在这篇介绍中，我们将学习如何使用React Native在Javascript中构建一个名为Open Call的应用程序。Open Call是一个允许用户随时随地自由通话的应用程序。我们将学习React Native的基本概念，如何创建React组件，如何使用样式和如何处理用户输入等。

前置条件

在开始本教程之前，请确保您已经安装了以下工具：

• Node.js
• React Native CLI

您还应该熟悉JavaScript和React的基础知识。

创建新项目

首先，让我们创建一个新的React Native项目。打开终端并运行以下命令：

npx react-native init OpenCall

此命令将创建一个名为OpenCall的新项目。

创建组件

接下来，我们将创建一个名为OpenCallScreen的React组件，它将显示一个简单的UI，用户可以在其中输入电话号码并开始通话。

在src文件夹下创建一个新的文件夹components，并在其中创建一个新的文件OpenCallScreen.js。将以下代码复制到新文件中：

import React, { useState } from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";

const OpenCallScreen = () => {
  const [phoneNumber, setPhoneNumber] = useState("");

  const handlePhoneChange = (phoneNumber) => {
    setPhoneNumber(phoneNumber);
  };

  const handleCallPress = () => {
    // TODO: Implement call logic
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter phone number"
        value={phoneNumber}
        onChangeText={handlePhoneChange}
      />
      <Button title="Call" onPress={handleCallPress} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    height: 40,
    width: "80%",
    borderColor: "gray",
    borderWidth: 1,
    marginTop: 20,
    marginBottom: 20,
    paddingLeft: 10,
  },
});

export default OpenCallScreen;

该组件声明了一个名为OpenCallScreen的函数组件，其返回一个View和一个TextInput和一个Button。useState钩子用于在组件中存储用户输入的电话号码，在电话号码发生更改时，我们调用handlePhoneChange函数进行更新。通过handleCallPress函数处理“Call”按钮的onPress事件。

展示组件

现在我们已经创建了OpenCallScreen组件，让我们在应用程序中显示它。打开App.js文件并替换以下内容：

import React from "react";
import OpenCallScreen from "./src/components/OpenCallScreen";

const App = () => {
  return <OpenCallScreen />;
};

export default App;

现在，我们的应用程序将默认显示OpenCallScreen组件。 运行以下命令以在iOS模拟器中启动您的应用程序：

npx react-native run-ios

实现呼叫逻辑

我们的Open Call应用程序需要通过通话捕获音频输入和输出。 我们将使用React Native中提供的音频API来实现此功能。 首先，安装以下库：

npm install react-native-audio --save

在OpenCallScreen.js文件中添加以下行：

import AudioRecorderPlayer from "react-native-audio-recorder-player";
import { PermissionsAndroid, Platform } from "react-native";

在组件中声明以下常量:

const audioRecorderPlayer = new AudioRecorderPlayer();
const [isRecording, setIsRecording] = useState(false);

大多数移动设备上的授权必须使用异步的方式请求。为此，请添加以下行：

const requestRecordAudioPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: "Record Audio Permission",
        message: "Open Call needs access to your microphone",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK",
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("Record Audio permission granted");
    } else {
      console.log("Record Audio permission denied");
    }
  } catch (err) {
    console.warn(err);
  }
};

添加以下功能来处理“Call”按钮的点击事件：

const handleCallPress = async () => {
  if (Platform.OS === "android") {
    await requestRecordAudioPermission();
  }

  if (isRecording) {
    audioRecorderPlayer.stopPlayer();
    audioRecorderPlayer.stopRecorder();
    setIsRecording(false);
  } else {
    const audioPath = await audioRecorderPlayer.startRecorder();
    console.log(`Recording started at path: ${audioPath}`);
    setIsRecording(true);
  }
};

在组件返回语句的上面添加以下行，以确保正在进行录音时正确显示UI：

<Button
    title={isRecording ? "Stop Recording" : "Start Recording"}
    onPress={handleCallPress}
/>

现在我们已经实现了呼叫逻辑。您可以在设备上测试该应用程序（示例代码未在此示例中包含调用逻辑）。完成后，请使用以下命令停止运行：

npx react-native run-ios

结论

在本教程中，我们通过使用React Native在Javascript中构建了Open Call应用程序，介绍了React和React Native的基本概念，创建组件，处理用户输入，并逐步构建了应用程序的呼叫逻辑。完成后，您可以尝试添加更多功能以完善您的应用程序。