错误: 不变违规:元素类型无效:预期为字符串 (对于 内置组件)或类/函数(用于复合 组件) 但得到:对象。
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"
}
}
答案 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'