为什么我在React Native中使用forwardRef时会出现报错？

问题原因 #

你遇到的报错核心是两个常见问题：

• 执行audioRef.current.play()时，audioRef.current还未完成赋值，或是React 18严格模式下首次执行useEffect时ref已被临时重置为null
• 现代浏览器的自动播放策略限制：禁止页面在没有用户交互（点击、触摸等）的前提下自动播放音频/视频，直接调用play()会触发Promise拒绝报错

修复方案 #

1. 先修改主文件逻辑，增加空值判断和错误捕获：

import Audio from "../../../src/Audio";
// 确保已引入对应hook
import { useRef, useEffect } from 'react';

const audioRef = useRef(null);

useEffect(()=> {
  // 先判断ref是否存在再调用方法
  if(audioRef.current) {
    // play方法返回Promise，用catch捕获自动播放相关的报错
    audioRef.current.play().catch(err => {
      console.log("自动播放被浏览器限制，请触发用户交互后再播放：", err);
      // 可在此处添加引导用户点击播放按钮的业务逻辑
    });
  }
}, [])

return (
  <View>         
    <Audio ref={audioRef} />    
  </View>
)

2. （可选）如果需要实现自动播放，可以给audio元素加muted属性，静音状态下大部分浏览器允许自动播放，修改Audio.js代码：

import React from "react";
import Song from "./components/song/song.mp3";

const Audio = React.forwardRef((props,ref) => {
  return(
    {/* 增加muted属性允许静音自动播放，需要有声播放可在后续用户交互后取消静音 */}
    <audio src={Song} ref={ref} muted></audio>
  )
})

export default Audio;

3. 更稳妥的方案是绑定用户点击事件触发播放，比如新增一个播放按钮，用户点击后再调用audioRef.current.play()，可以完全规避浏览器自动播放限制。

内容的提问来源于stack exchange，提问作者user15974221