如何在React Native的Android端显示全景图？已有尝试遇阻求助

嗨，我看你在React Native里实现全景图时踩了好几个坑，结合我自己的实战经验，给你几个针对性的解决方案，应该能帮你搞定这些问题：

你之前尝试调用Android原生Activity但内容不显示，还纠结怎么在Modal里打开非全屏Activity——其实更合理的思路是把原生全景图View封装成React Native组件，直接嵌入Modal，而不是启动独立的Activity（毕竟Modal是React Native的组件层级，和Android的Activity窗口不是一套体系）。

这里用Google官方的PanoramaView来实现，步骤如下：

1. 编写Android原生代码 #

首先创建一个原生View管理器，用来连接React Native和Android的全景图控件：

// PanoramaViewManager.java
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.google.android.gms.panorama.PanoramaView;

public class PanoramaViewManager extends SimpleViewManager<PanoramaView> {
    public static final String REACT_CLASS = "RNPanoramaView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected PanoramaView createViewInstance(ThemedReactContext reactContext) {
        return new PanoramaView(reactContext);
    }

    // 暴露给React Native的属性，用来传递全景图URL
    @ReactProp(name = "panoramaUrl")
    public void setPanoramaUrl(PanoramaView view, String url) {
        if (url != null) {
            view.loadPanoramaInfo(com.google.android.gms.panorama.PanoramaClient.PanoramaSource.NETWORK, url);
        }
    }
}

然后在MainApplication.java里注册这个组件：

@Override
protected List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
            new MainReactPackage(),
            new PanoramaViewManager() // 添加这一行
    );
}

2. React Native端调用（嵌入Modal） #

在JS代码里引入原生组件，直接放在Modal中使用：

import React, { useState } from 'react';
import { Modal, View, Button, requireNativeComponent } from 'react-native';

// 引入原生组件
const RNPanoramaView = requireNativeComponent('RNPanoramaView');

const PanoramaModal = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开全景图Modal" onPress={() => setIsModalVisible(true)} />
      
      <Modal 
        visible={isModalVisible} 
        animationType="slide" 
        onRequestClose={() => setIsModalVisible(false)}
        presentationStyle="pageSheet" // 非全屏样式，iOS/Android都支持
      >
        <View style={{ flex: 1 }}>
          <Button title="关闭" onPress={() => setIsModalVisible(false)} />
          {/* 嵌入全景图组件 */}
          <RNPanoramaView 
            style={{ flex: 1 }} 
            panoramaUrl="https://example.com/your-panorama-image.jpg" // 替换成你的全景图URL
          />
        </View>
      </Modal>
    </View>
  );
};

export default PanoramaModal;

这样既解决了原生Activity无内容的问题，又实现了在Modal里显示全景图的需求，完全不需要启动独立的Activity。

如果想快速实现跨平台（iOS+Android），用WebView加载react-vr生成的全景页面是个不错的选择，具体操作如下：

1. 生成react-vr全景页面 #

• 先安装react-vr脚手架：npm install -g react-vr-cli
• 创建项目：react-vr init PanoramaVR
• 进入项目，修改index.vr.js加载你的全景图：

import React from 'react';
import { AppRegistry, View, Pano } from 'react-vr';

const PanoramaVR = () => {
  return (
    <View>
      {/* 替换成你的全景图URL */}
      <Pano source={{ uri: 'https://example.com/your-panorama-image.jpg' }} />
    </View>
  );
};

AppRegistry.registerComponent('PanoramaVR', () => PanoramaVR);

• 启动项目：npm start，此时会得到一个本地访问URL，比如http://localhost:8081/vr/

2. React Native中用WebView加载 #

把这个URL放在WebView里，同样可以嵌入Modal：

import React, { useState } from 'react';
import { Modal, View, Button, WebView } from 'react-native';

const WebViewPanorama = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开WebView全景图" onPress={() => setIsModalVisible(true)} />
      
      <Modal 
        visible={isModalVisible} 
        animationType="slide" 
        onRequestClose={() => setIsModalVisible(false)}
      >
        <View style={{ flex: 1 }}>
          <Button title="关闭" onPress={() => setIsModalVisible(false)} />
          <WebView 
            style={{ flex: 1 }} 
            source={{ uri: 'http://localhost:8081/vr/' }} // 上线替换成服务器URL
            javaScriptEnabled={true}
            domStorageEnabled={true}
            allowsFullscreenVideo={true}
          />
        </View>
      </Modal>
    </View>
  );
};

export default WebViewPanorama;

这个方案的优势是跨平台成本低，缺点是WebView的性能和交互体验不如原生组件，适合快速验证或者对性能要求不高的场景。

你提到react-native-360仅支持iOS，我们可以做平台判断，iOS用这个库，Android用我们封装的原生组件，实现无缝跨平台：

import React from 'react';
import { Platform, StyleSheet } from 'react-native';
import { requireNativeComponent } from 'react-native';
import { PanoramaView } from 'react-native-360';

const RNPanoramaView = requireNativeComponent('RNPanoramaView');

const CrossPlatformPanorama = ({ url }) => {
  if (Platform.OS === 'ios') {
    return <PanoramaView style={styles.panorama} image={url} />;
  } else {
    return <RNPanoramaView style={styles.panorama} panoramaUrl={url} />;
  }
};

const styles = StyleSheet.create({
  panorama: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

export default CrossPlatformPanorama;

把这个组件直接放在Modal里，就能实现iOS/Android都能用的全景图Modal了。

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