在 react native expo 中测量分贝

Question

I am trying to build a range timer. Which essentially starts a timer and stops it when a shot has been fired. For this I thought I would measure decibels and when it spikes I stop the timer. Now I have had a look around everywhere and can't seem to get it to work.

Some of the stuff I looked at:
Measure loudness of the audio with react-native
Sound metering react-native
https://www.npmjs.com/package/react-native-sound-level

It could be because I implemented it all wrong. For instance componentDidMount can't be recognised. It may be because of me but I don't know.

import React, {
  useState,
  useEffect,
  componentDidMount,
  componentWillUnmount,
} from "react";
import { StyleSheet, Text, Dimensions } from "react-native";
import Title from "../components/Title";
import { Button, Input } from "react-native-elements";
import RNSoundLevel from 'react-native-sound-level'

const CreateGunScreen = ({ navigation }) => {
  const [name, setName] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
 
    componentDidMount() { // The curly brace has a red line
    RNSoundLevel.start()
    RNSoundLevel.onNewFrame = (data) => {
        // see "Returned data" section below
        console.log('Sound level info', data)
    }
    }
    
    // don't forget to stop it
    componentWillUnmount() { // The curly brace has a red line
    RNSoundLevel.stop()
    }

  return (
    <>
      <Title text="Create Gun" />
      <Input
        label="name"
        value={name}
        onChangeText={setName}
        autoCapitalize="none"
        autoCorrect={false}
        containerStyle={styles.input}
      />
      {errorMessage ? (
        <Text style={styles.errorMessage}>{errorMessage}</Text>
      ) : null}
      <Button
        title="Cancel"
        type="clear"
        style={{
          alignSelf: "center",
          marginVertical: 10,
        }}
        onPress={() => navigation.navigate("Guns")}
      />
    </>
  );
};

export default CreateGunScreen;

I really hope someone can help me log realtime decibels to the console, and it will be appreciated. Thanks in advance!

EDIT:

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, Dimensions } from "react-native";
import Title from "../components/Title";
import { Button, Input } from "react-native-elements";
import RNSoundLevel from "react-native-sound-level";

const CreateGunScreen = ({ navigation }) => {
  const [name, setName] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  async function start_measuring() {
    try {
      RNSoundLevel.start();
      RNSoundLevel.onNewFrame = (data) => {
        // see "Returned data" section below
        console.log("Sound level info", data);
      };
    } catch (err) {
      console.log(err);
    }
  }

  useEffect(() => {
    start_measuring();
    return function cleanup() {
      RNSoundLevel.stop();
    };
  });

  return (
    <>
    </>
  );
};

export default CreateGunScreen;

Answer 1

You have created a functional component, so the methods componentWillMount and componentWillUnmount are not available. You can use the useEffect hook instead, see https://reactjs.org/docs/hooks-effect.html