在 react-native 中设置背景视频答案

【问题标题】：Setting Background video in react-native在 react-native 中设置背景视频
【发布时间】：2017-07-19 15:28:47
【问题描述】：

如果这是一个新手问题，我很抱歉，但我对在我的 react native 应用程序中设置背景视频感到非常沮丧。

从 react 原生视频 library 的文档开始。它是糟糕的文档还是我很难理解如何设置它？

我执行了 npm install --save react-native-video。
我运行了 react-native 链接

我检查了其他 java 文件，他们已经有了他记下的内容。而他对 Windows 的引用，我不知道他所说的应该做什么或哪个用户案例场景。

到代码：

在我的登录组件中，我想要一个背景视频。到目前为止，这是我的代码：

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Video from 'react-native-video';

class LoginComponent extends Component {

  render() {
    const {
      containerStyle,
      introTextContainerStyle,
      introTextStyle,
      introTextHighlightStyle,
      loginButtonsContainerStyle,
      backgroundVideo
    } = styles;

    return (
      <View style={ containerStyle }>
        <Video source={{uri: "../assets/background.mp4"}}
           ref={(ref) => {
             this.player = ref
           }}
           rate={1.0}
           volume={1.0}
           muted={false}
           resizeMode="cover"
           repeat={true}
           style={backgroundVideo}
        />
        <View style={ introTextContainerStyle }>
          <Text style={ introTextStyle }>
            Tus problemas
          </Text>
          <Text style={ introTextHighlightStyle }>
            Lisdos's
          </Text>
          <Text style={ introTextStyle }>
            en un abrir y cerrar de ojos
          </Text>
        </View>

        <View style={ loginButtonsContainerStyle }>
          <TouchableOpacity>
            <Text>Log In with Facebook</Text>
          </TouchableOpacity>
        </View>

      </View>
    );
  }
}

const styles = {
  containerStyle: {
    height: '100%',
    padding: 20
  },

  introTextContainerStyle: {
    borderColor: 'black',
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: '50%'
  },

  introTextStyle: {
    fontSize: 24,
    textAlign: 'center',
    lineHeight: 40
  },

  introTextHighlightStyle: {
    fontSize: 24,
    textAlign: 'center',
    fontWeight: '700',
    color:'gold'
  },

  loginButtonsContainerStyle: {
    borderColor: 'blue',
    borderWidth: 1,
    height: '50%',
    justifyContent: 'center',
    alignItems: 'center'
  },

  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  }
}

export default LoginComponent;

没有标签，组件渲染得很好，但我一直点击臭名昭著的红屏：

Cannot read property 'Constants' of undefined

我是否在设置或标签中遗漏了什么？我的uri错了吗？

感谢任何帮助。

【问题讨论】：

标签： react-native background

【解决方案1】：

问题在于您的sourcetag。由于您使用RN Asset系统加载文件，因此您需要直接导入文件而不是使用uri。

我通常这样做（我建议你这样做）：

import background from '../assets/background.mp4';
...
   <Video source={background}
    ...
   />

或者你可以直接在你的源标签中导入你的文件：

<Video source={require('../assets/background.mp4')}
...
/>

【讨论】：