React Native中react-native-youtube-iframe的ref返回undefined求助

你代码里的核心问题是没有正确初始化ref对象，只是声明了player变量但没赋值为有效的ref实例，导致传给组件的ref是undefined，自然拿不到播放器引用。

修复步骤： #

• 用React.createRef()初始化ref，类组件中必须通过这种方式创建ref才能关联到组件实例。
• 修正ref的类型定义，确保和createRef返回的类型匹配。

修改后的完整代码： #

import React, { ReactNode, RefObject } from "react";
import YoutubeIframe, { PLAYER_STATES, YoutubeIframeRef } from "react-native-youtube-iframe";

// 补充Props和State的定义（如果之前没写的话）
type Props = {
  id: string;
  // 其他props...
};

type State = {
  // 你的状态定义...
};

export default class YouTubeVideoPlayer extends React.Component<Props, State> {
  // 初始化ref，类型为RefObject<YoutubeIframeRef>
  private player: RefObject<YoutubeIframeRef> = React.createRef();

  // 示例：调用播放器方法的函数
  playVideo = () => {
    // 确保current存在再调用方法
    this.player.current?.play();
  };

  render(): ReactNode {
    return (
      <>
        <YoutubeIframe
          videoId={this.props.id}
          ref={this.player} // 现在ref已正确初始化
          play={false}
          // 其他属性...
        />
        {/* 可以加个按钮测试调用 */}
        {/* <Button title="播放" onPress={this.playVideo} /> */}
      </>
    );
  }
}

额外说明： #

• 如果你需要在组件挂载后立即操作播放器，要在componentDidMount生命周期里执行，此时ref已经关联到YoutubeIframe实例：

componentDidMount() {
  // 比如设置播放速度
  this.player.current?.setPlaybackRate(1.5);
}

• 注意调用ref的方法时要加可选链?.，避免current为null时报错。

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