React-Native错误使用expo将视频添加到app.js作为背景

时间:2018-10-01 03:31:31

标签: reactjs react-native expo simulator

这里有错误 image

错误:         不变违规:元素类型无效:预期为字符串         (对于          内置组件)或类/函数(用于复合          组件)           但得到:对象。

Check the render method of `App`.

This error is located at:
in RCTView (at View.js:60)
in View (at App.js:31)
in RCTView (at View.js:60)
in View (at App.js:30)

我将带有expo的视频添加到我的app.js中,但出现此错误,似乎无法解决。我正在尝试将背景设置为已保存到资产文件夹和桌面的视频

App.JS

import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import Video from 'expo';
import { MaterialIcons, Octicons } from '@expo/vector-icons';


export default class App extends React.Component {
    state = {
        mute: false,
        fullScreen: false,
        shouldPlay: true,
    }

handlePlayAndPause = () => {
    this.setState(prevState => ({
        shouldPlay: !prevState.shouldPlay
    }));
}

handleVolume = () => {
    this.setState(prevState => ({
        mute: !prevState.mute,
    }));
}

 render() {
    const { width } = Dimensions.get('window');

return (
  <View style={styles.container}>
            <View>
                    <Text style={{ textAlign: 'center' }}> React Native Video </Text>
                    <Video
                        source={{ uri: './assets/background.mp4' }}
                        shouldPlay={this.state.shouldPlay}
                        resizeMode="cover"
                        style={{ width, height: 300 }}
                        isMuted={this.state.mute}
                    />
                    <View style={styles.controlBar}>
                        <MaterialIcons 
                            name={this.state.mute ? "volume-mute" : "volume-up"}
                            size={45} 
                            color="white" 
                            onPress={this.handleVolume} 
                        />
                        <MaterialIcons 
                            name={this.state.shouldPlay ? "pause" : "play-arrow"} 
                            size={45} 
                            color="white" 
                            onPress={this.handlePlayAndPause} 
                        />
                    </View>
                </View>
  </View>
          );
      }
       }

常量样式= StyleSheet.create({   容器: {     弹性:1,     backgroundColor:“#fff”,     alignItems:'中心',     justifyContent:“中心”,     },     controlBar:{     位置:“绝对”,     底部:0,     左:0,     右:0,         高度:45,         flexDirection:'行',         alignItems:'中心',         justifyContent:“中心”,         backgroundColor:“ rgba(0,0,0,0.5)”,     }     });

package.json

{
  "name": "empty-project-template",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
  "start": "expo start",
  "android": "expo start --android",
  "ios": "expo start --ios",
  "postinstall": "react-native link",
  "eject": "expo eject"
},
  "dependencies": {
  "@babel/preset-react": "^7.0.0",
  "@expo/vector-icons": "^6.3.1",
  "expo": "^30.0.1",
  "link": "^0.1.5",
  "react": "16.3.1",
  "react-native": "^0.55.0",
  "react-native-vector-icons": "^5.0.0",
  "react-native-video": "^3.2.1"
}

}

1 个答案:

答案 0 :(得分:0)

如果您要在项目目录中使用视频,则必须在源属性中require {p>

<Video
  source={require('./assets/background.mp4')}
  shouldPlay={this.state.shouldPlay}
  resizeMode="cover"
  style={{ width, height: 300 }}
  isMuted={this.state.mute}
/>

以下是使用视频组件https://github.com/expo/expo-docs/blob/master/versions/v25.0.0/sdk/video.md

的文档

另外,您应该像这样导入视频 import {Video} from 'expo'