如何在 Deck Swiper 中播放视频

Question

我正在使用这个包添加一个Swiper 功能 - https://github.com/alexbrillant/react-native-deck-swiper

但是，我不想显示图像或文本，而是想显示视频。我正在使用此库添加/播放视频 - https://docs.expo.dev/versions/latest/sdk/video/ 但视频无法播放。如果我尝试在Swiper 之外显示视频，它会播放。如何让Swiper 播放视频。这是我的代码：

import React from 'react';
import {View, Button, StyleSheet, Text} from 'react-native';
import Swiper from 'react-native-deck-swiper';
import { Video, AVPlaybackStatus } from 'expo-av';

export const Test = () => {
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#F5FCFF"
    },
    card: {
      flex: 1,
      borderRadius: 4,
      borderWidth: 2,
      borderColor: "#E8E8E8",
      justifyContent: "center",
      backgroundColor: "white"
    },
    text: {
      textAlign: "center",
      fontSize: 50,
      backgroundColor: "transparent"
    },
    video: {
      alignSelf: 'center',
      width: 320,
      height: 200,
    },
    buttons: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    },
  });
  return (
    <View style={styles.container}>
        <Swiper
            cards={['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY']}
            renderCard={(card) => {
                return (
                    <View style={styles.card}>
                        {/* <Text style={styles.text}>{card}</Text> */}
                        <Video
                          ref={video}
                          style={styles.video}
                          source={{
                            uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
                          }}
                          useNativeControls
                          resizeMode="contain"
                          isLooping
                          onPlaybackStatusUpdate={status => setStatus(() => status)}
                        />
                    </View>
                )
            }}
            onSwiped={(cardIndex) => {console.log(cardIndex)}}
            onSwipedAll={() => {console.log('onSwipedAll')}}
            cardIndex={0}
            backgroundColor={'#4FD0E9'}
            stackSize= {3}>
            <Button
                onPress={() => {console.log('oulala')}}
                title="Press me">
                You can press me
            </Button>
        </Swiper>
    </View>
  );
};

如果这不可能，最好的方法是什么？

Answer 1

您找到解决问题的方法了吗？目前遇到同样的问题。