按下聊天应用程序气泡内的视频消息时弹出视频播放器（React Native）

Question

我正在编写一个聊天应用程序，它可以通过本机反应发送和接收视频文件。当按下聊天应用程序气泡内的视频消息时，我目前正在努力激活视频播放器。我尝试编写代码但失败了。以下是提取的相关部分代码。另外，出于测试目的，我已将 videoUrl 替换为“http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4”。

import { Video } from "expo-av";

.
.
.
const [modalVisible, setModalVisible] = React.useState(false);
.
.
.

//If there is videoTHumbnailUrl, then pressing the bubble will trigger to play the video file
{          {videoThumbnailUrl && (
        // <Image source={{ uri: videoThumbnailUrl }} style={styles.image} />
        // <View style={styles.container}>
        <TouchableOpacity
          // onPress={() => console.log(videoUrl)}
          // onPress={() => playMedia()}

          onPress={() => {
            setModalVisible(true);
            return (
              <View
                style={{
                  flex: 1,
                  backgroundColor: "red",
                  justifyContent: "center",
                }}
              >
                <Modal
                  visible={modalVisible}
                  onRequestClose={() => {
                    setModalVisible(!modalVisible);
                  }}
                >
                  <View style={{ backgroundColor: "white", flex: 1 }}>
                    <Video
                      source={{
                        uri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
                      }}
                      style={{ height: 300, width: 300, opacity: 0.5 }}
                    />
                  </View>
                </Modal>
              </View>
            );
          }}
        >
          <ImageBackground
            source={{ uri: videoThumbnailUrl }}
            resizeMode="cover"
            style={styles.image}
          >
            <AntDesign name="playcircleo" color="white" size={80} />
          </ImageBackground>
        </TouchableOpacity>
        // </View>
      )}

当我按下聊天应用程序气泡中的视频消息时，我预计视频播放器会弹出并播放视频文件，但什么也没发生。

Answer 1

你可以试试这个吗？

{          {videoThumbnailUrl && (
   
<TouchableOpacity

   onPress={() => {
        setModalVisible(true);
       
      }}
    >
      <ImageBackground
        source={{ uri: videoThumbnailUrl }}
        resizeMode="cover"
        style={styles.image}
      >
        <AntDesign name="playcircleo" color="white" size={80} />
      </ImageBackground>
    </TouchableOpacity>
    // </View>
  )}
}


{
    modalVisible &&
    <View
    style={{
      flex: 1,
      backgroundColor: "red",
      justifyContent: "center",
    }}
  >
    <Modal
      visible={modalVisible}
      onRequestClose={() => {
        setModalVisible(!modalVisible);
      }}
    >
      <View style={{ backgroundColor: "white", flex: 1 }}>
        <Video
          source={{
            uri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
          }}
          style={{ height: 300, width: 300, opacity: 0.5 }}
        />
      </View>
    </Modal>
  </View>
}