设置反应原生背景视频

如果这是一个新手问题，我很抱歉，但是我真的很沮丧在我的反应原生应用中设置背景视频。设置反应原生背景视频

从反应本机视频文件library开始。这是不好的文档，或者我真的很难理解如何设置它？

我做了npm install --save react-native-video。
我跑反应本地链路

我检查了其他的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

我缺少的东西在安装或标签？我的乌里错了吗？

任何帮助表示赞赏。

来源

2017-07-19 Walter Monecke

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

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

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

或者，你可以直接在你的源代码中导入文件：

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

来源

2017-07-19 15:42:24

设置反应原生背景视频

回答

相关问题