在本机反应中,如何将视频组件设置为页面背景？

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>
    );
  }
}

我只是想让视频成为屏幕的背景.我正在使用一个窗口,所以如果没有Xcode,我有点迷失方向.还有另一种方法吗？

Answer 1

如果您使用的是react-native-video库,则可以Video使用position: 'absolute'.看这个例子:

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);

我测试了它并运行良好:

截图