Question

我目前正在使用Expo学习React / React-Native，所以我需要播放视频该视频将保存在服务器中，但现在我正在使用随机视频，并且该视频必须具有贴纸 kinda像instagram 。

我显然想将这两件事合并在一起并传递经过编辑的视频，但是后来我想到了一个主意，就是将这两件事相互叠加显示，我所拥有的当前状态是：

这个命题可行吗？，我搜索并读到添加position: 'absolute'应该可以，但是图像甚至不显示，这是代码：

import {
    View, 
    StyleSheet,
    Text,
    Image,
    SafeAreaView,
    Dimensions,
    ScrollView } from 'react-native'
import { Video } from 'expo-av'

// const {widthVideo, heightVideo} = Dimensions.get('window');
// Image.getSize('../.././assets/hack.png', (width, height) => {this.setState({width, height})});


const ReportsLists = ({ navigation }) => {
    return (
        <SafeAreaView>
            <ScrollView>
                <View style={styles.container}>
                    <Image style = {styles.watermark} source = {{uri: 'https://www.hackathones.mx/img/supporters/3.png'}}/>

                    <Video
                        source={{ uri: 'https://i.imgur.com/j020nsG.mp4' }}
                        rate={1.0}
                        volume={1.0}
                        isMuted={false}
                        resizeMode="cover"
                        shouldPlay
                        isLooping
                        useNativeControls
                        style={{ width: 420, height: 680, flex: 1, zIndex: 1 }}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        margin: 5
    },
    watermark: {
        margin: 5,
        position: 'absolute',
        top: 0,
        left: 0,
        opacity: 50,
        zIndex: 100
    }
});

export default ReportsLists```

Answer 1

尝试使用水印图像样式设置宽度和高度，如果不起作用，请尝试交换图像视图和视频视图的位置

将视频播放器（expo-av）放在React-Native的Image下

1 个答案: