在 React-Native 中的图像下放置一个视频播放器（expo-av）答案

【问题标题】：Put a Video player (expo-av) under an Image in React-Native在 React-Native 中的图像下放置一个视频播放器（expo-av）
【发布时间】：2021-02-04 16:50:09
【问题描述】：

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

我显然想把两个东西合并在一起，然后把编辑后的视频传出去，但后来我有了一个想法，只是把两个东西放在一起显示，我现在的状态是：

Current state of the app with video playback

这个提议可能吗？，我搜索并读到添加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```

【问题讨论】：

标签： javascript reactjs react-native expo jsx

【解决方案1】：

尝试在水印图像样式中提供宽度和高度，如果不起作用，则尝试交换图像视图和视频视图的位置

【讨论】：

好像问题是没有在图片的样式中添加宽度和高度哈哈，谢谢