如何创建自定义按钮调用WebView加载的在线电台页面播放功能

你之前的代码存在3个核心问题：

• 选择器使用错误：jp-play是按钮的类名，不是id，不能用getElementById获取
• 仅获取了按钮元素，没有执行click()触发点击动作
• 初始传入的injectedJavaScript仅会在WebView首次加载时执行1次，无法实现点击RN按钮动态触发的需求

实现的核心逻辑很简单：给WebView绑定引用（ref），点击自定义按钮时，通过WebView实例的injectJavaScript方法，向网页注入一段JS代码，找到网页自带的播放按钮并触发点击即可。

首先确保你的项目已经安装了react-native-webview依赖并完成原生端配置。

import React, { useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import WebView from 'react-native-webview';

const RadioScreen = () => {
  // 创建WebView的引用，用于后续调用注入JS的方法
  const webViewRef = useRef(null);

  const handlePlayPress = () => {
    // 要注入到网页执行的JS代码
    const injectCode = `
      // 用类选择器找到网页的播放按钮
      const webPlayBtn = document.querySelector('.jp-play');
      // 按钮存在的话触发点击
      if (webPlayBtn) {
        webPlayBtn.click();
      }
      // 安卓端要求注入的JS最后必须返回布尔值，避免警告
      true;
    `;
    // 调用WebView方法执行注入的JS
    webViewRef.current?.injectJavaScript(injectCode);
  };

  return (
    <View style={styles.container}>
      <WebView
        ref={webViewRef}
        source={{ uri: 'https://mmufmkenya.radio12345.com/' }}
        javaScriptEnabled={true}
        // 如果需要进入页面自动播放，打开下方注释，3000是延迟3秒等网页元素加载完成，可自行调整
        // injectedJavaScript={`setTimeout(() => {document.querySelector('.jp-play')?.click(); true;}, 3000)`}
        style={styles.webview}
      />
      <Button title="点击播放电台" onPress={handlePlayPress} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
    marginBottom: 10,
  }
});

export default RadioScreen;

• 你可以先在PC浏览器打开电台页面，按下F12打开控制台，输入document.querySelector('.jp-play').click()验证选择器有效性，测试可正常触发播放
• 如果需要实现暂停功能，只需要把选择器替换为.jp-pause即可，或者直接判断按钮的类名状态做切换逻辑

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