在 react native 中，如何将视频组件设置为页面背景？

Question

  render() {
    return (

      <View style={styles.container}>


        <Video
          source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
          rate={1.0}
          volume={1.0}
          muted={false}
          resizeMode="cover"
          repeat
          style={{ width: 300, height: 300 }}
        />


      </View>
    );
  }
}

我只是想让视频成为屏幕的背景。我正在使用 Windows，所以我对如何在没有 Xcode 的情况下做到这一点有点迷茫。有其他方法吗？

Answer 1

如果您使用react-native-video 库，您可以使用position: 'absolute' 设置Video 组件。看这个例子：

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import Video from 'react-native-video';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>

        <Video
          source={require('./video.mp4')}
          rate={1.0}
          volume={1.0}
          muted={false}
          resizeMode={"cover"}
          repeat
          style={styles.video}
        />

        <View style={styles.content}>
          <Text style={styles.text}>Hello</Text>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  video: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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

我测试过，效果很好：

Screenshot