如何在Expo构建的React Native应用中集成Spotify Webplayer SDK实现音乐播放？

可以实现，但你当前的写法存在核心问题：React Native的全局window和Webview内部的JS上下文是完全隔离的，外部useEffect里的window.onSpotifyWebPlaybackSDKReady无法触发Webview内的SDK逻辑。以下是正确的实现思路和方案：

正确实现方式：Webview内部注入SDK与初始化 #

必须将SDK加载和Player初始化逻辑放在Webview的独立JS环境中，可通过以下两种方式实现：

1. 内嵌HTML加载SDK并初始化 #

直接在Webview的source中传入包含SDK脚本和初始化代码的HTML：

import { WebView } from 'react-native-webview';

export default function SpotifyPlayer() {
  const spotifyPlayerHtml = `
    <html>
      <body>
        <script src="https://sdk.scdn.co/spotify-player.js"></script>
        <script>
          window.onSpotifyWebPlaybackSDKReady = () => {
            const player = new Spotify.Player({
              name: 'React Native Webview Player',
              getOAuthToken: cb => cb('你的Spotify访问令牌'), // 需包含streaming权限
              volume: 0.6
            });

            // 监听设备就绪事件，将设备ID传回原生层
            player.addListener('ready', ({ device_id }) => {
              window.ReactNativeWebView.postMessage(JSON.stringify({
                type: 'DEVICE_READY',
                deviceId: device_id
              }));
            });

            // 处理错误
            player.addListener('initialization_error', ({ message }) => {
              console.error('初始化失败:', message);
            });

            player.connect();
          };
        </script>
      </body>
    </html>
  `;

  const handleWebviewMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.type === 'DEVICE_READY') {
      // 拿到设备ID后，即可用Spotify Web API控制播放
      console.log('可用播放设备ID:', data.deviceId);
    }
  };

  return (
    <WebView
      source={{ html: spotifyPlayerHtml }}
      onMessage={handleWebviewMessage}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

2. 动态注入初始化代码 #

如果需要更灵活的逻辑控制，可在Webview加载完成后注入初始化脚本：

import { WebView } from 'react-native-webview';
import { useRef } from 'react';

export default function SpotifyPlayer() {
  const webViewRef = useRef(null);

  const initPlayerScript = `
    window.onSpotifyWebPlaybackSDKReady = () => {
      const token = '你的Spotify访问令牌';
      const player = new Spotify.Player({
        name: 'RN Webview Player',
        getOAuthToken: cb => cb(token),
        volume: 0.5
      });

      player.addListener('ready', ({ device_id }) => {
        window.ReactNativeWebView.postMessage(JSON.stringify({
          type: 'DEVICE_READY',
          deviceId: device_id
        }));
      });

      player.connect();
    };

    // 动态加载SDK脚本
    const script = document.createElement('script');
    script.src = 'https://sdk.scdn.co/spotify-player.js';
    script.async = true;
    document.body.appendChild(script);
  `;

  const handleMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.type === 'DEVICE_READY') {
      // 用Spotify Web API控制该设备播放
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ html: '<html><body></body></html>' }}
      onLoad={() => webViewRef.current?.injectJavaScript(initPlayerScript)}
      onMessage={handleMessage}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

关键注意事项 #

• 权限要求：Spotify访问令牌必须包含streaming权限，否则无法初始化播放设备。
• 上下文隔离：永远不要尝试在Webview外部直接操作其内部的window对象，所有Webview内的逻辑必须通过注入脚本或内嵌HTML实现，数据传递用postMessage完成。
• 设备控制：初始化成功后，该Webview播放器会成为Spotify生态中的一个可用设备，你可以用Spotify Web API的transferPlayback接口将播放转移到该设备，或直接通过Webview内的Player实例控制播放。
• Expo适配：Expo官方支持react-native-webview组件，无需额外配置；iOS端默认允许加载HTTPS资源，无需修改ATS设置。

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