- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是错误消息:
错误:
不变违规:元素类型无效:预期为字符串
(为了
内置组件)或类/函数(用于复合
组件)
但得到:对象。
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)
我在我的 App.js 中添加了一个带有 Expo 的视频,我收到了这个错误,似乎无法解决它。我正在尝试将背景设置为已保存到 Assets 文件夹和桌面的视频。
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>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
controlBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
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"
}
}
最佳答案
如果您正在使用项目目录中的视频,则必须 require
它在源属性中
<Video
source={require('./assets/background.mp4')}
shouldPlay={this.state.shouldPlay}
resizeMode="cover"
style={{ width, height: 300 }}
isMuted={this.state.mute}
/>
import {Video} from 'expo'
关于reactjs - React-Native 错误将使用 Expo 的视频添加到 App.js 作为背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52584234/
我正在尝试设置 React 和 Expo monorepo 项目,一切似乎都很好,直到我想安装 react-navigation与 expo install根据 react-navigation 文档
我正在使用 expo-cli@3.0.10 此应用程序在安装在设备中的客户端博览会中运行良好 最佳答案 好的,我相信我找到了核心问题 - DNS 问题 . 无论您使用的是 Mac OS、Windows
如何在开发过程中获取重定向到 expo 应用程序的链接? 我有一个 React Native Expo 应用程序。在开发过程中以 èxpo start 开始。现在我喜欢使用 OAuth 2.0 身份验
为什么EXPO有两种通过Google进行身份验证的方式? 我不清楚expo-google-app-auth和expo-google-sign-in之间有什么区别。 在什么场合我应该使用哪一个? 最佳答
我正在使用 React Native 进行编码。当我第一次创建用于检查运行的 react native 应用程序时,我没有看到这一点。当我实现我的代码时看到这一点。我的目的是生成apk。 app.js
我已经在全局范围内安装了 expo-cli,但是当我尝试运行任何 expo 代码时,例如 expo start从任何地方,我得到:zsh: command not found: expoecho $P
我是react-native新手,我安装了expo,如下官方页面中提到的。 npm install expo-cli --global expo init my-new-project cd my-n
根据 Expo documentation with SQLite 我会这样查询: tx.executeSql(sqlStatement, arguments, success, error) 我是这
很多次我在启动 expo 项目后收到以下信息消息,似乎无法升级 expo-cli: 有一个新版本的 expo-cli 可用 (4.2.1)。您目前正在使用 expo-cli 3.28.0 使用您选择的
我已经使用 Expo 构建了一个应用程序,现在由于某些原因我想使用 expo eject 从 expo cli 中弹出该应用程序。我还能使用 Expo 套餐吗? 最佳答案 是的,Expo 包应该可以。
部署我的 Expo 网络项目时,我需要将一个文件添加到网络根目录(一个 Apple App 站点关联文件)。 Expo 开箱即用地支持此功能吗? 最佳答案 您所要做的就是在项目的根目录中创建一个名为“
我需要有关 expo xde 的帮助。 创建项目后,当我扫描二维码时,出现以下错误: there was a problem loading the experience. It looks like
我使用create-react-native-app创建了react-native项目。在此,我从 expo 导入权限模块, import {Permissions} from "expo"; 后来我
例如,如果我有组件: import React, { Component } from 'react'; import { Video } from 'expo'; let styles = requ
我将使用 Expo 制作一个应用程序,并与客户分享初步结果。我想告诉他们,这个世博应用程序反射(reflect)了最终的应用程序,它将作为独立的应用程序供我客户的客户一对一使用。 该应用程序的功能将是
When I run a Snack in the Expo Go app, is it doing anything more sophisticated than downloading t
我刚刚从 React 导航 5 升级到 6 并查看了 the doc for transparent modals .不幸的是,我无法让之前的屏幕显示在模态下。相反,我得到一个灰色背景。 我用我的代码
我尝试通过 expo 构建应用程序但失败了,我尝试重新安装 expo-cli。所以,我输入了下面的代码来删除 expo-cli。 npm -g uninstall expo-cli --save 和
我正在尝试运行我的 react-native 应用程序,我在 android 模拟器和我的手机 HUAWEI Y3II 上运行它,同样的事情发生了。 几天前我工作得很好,但突然这个错误不断出现:Cou
在 Expo 网络项目中是否有推荐的代码拆分方法? 我在文档中找不到任何内容,即使在网页性能页面上:https://docs.expo.io/guides/web-performance/ 我很惊讶,
我是一名优秀的程序员,十分优秀!