設置反應原生背景視頻

如果這是一個新手問題，我很抱歉，但是我真的很沮喪在我的反應原生應用中設置背景視頻。設置反應原生背景視頻

從反應本機視頻文件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

設置反應原生背景視頻

回答

相關問題