React Native TypeError：无法读取未定义视频的属性“常量”

由 发布于

我刚开始学习React Native，现在很难在我的应用中渲染视频。基本上发生的是，我在代码其他部分使用的样式表适用于所有内容，但我将其用于视频时除外。我不知道为什么会这样。

这是我为解决此错误所做的工作：

因此，更改导入线

import { LoginPageStyle } from "../StyleSheet/LoginPageStyle";

至

import LoginPageStyle from "../StyleSheet/LoginPageStyle";

而且我也尝试过

在LoginPageStyle中将其命名为export

export default LoginPageStyle;

至

export { LoginPageStyle };


This is my main code for the component
import React, { Component } from "react";
import { Button, StyleSheet, View, Text } from "react-native";
import LoginButton from "./LoginButton";
import { LoginPageStyle } from "../StyleSheet/LoginPageStyle";
import Video from "react-native-video";

export class LoginPage extends Component {
  super(props) {
    this.alertUser = this.alertUser.bind(this);
  }

  connectViaFacebook = () => {
    alert("Connecting To Facebook");
  };

  connectViaPhoneNumber = () => {
    alert("Connecting via phone number");
  };

  render() {
    return (
      <View>
        <Video
          source={require("../Graphics/LoginVideo.mp4")}
          style={LoginPageStyle.backgroundVideo}
          muted={true}
          repeat={true}
          resizeMode={"cover"}
          rate={1.0}
          ignoreSilentSwitch={"obey"}
        />
        /> <Text style={LoginPageStyle.title}>Let's Hang</Text>
        <Text>Where people go on adventures</Text>
        <View style={LoginPageStyle.bottom}>
          <LoginButton
            text="Connect with Phone Number"
            onPress={this.connectViaPhoneNumber}
            color="#d10047"
          />

          <LoginButton
            text="Connect with Facebook"
            onPress={this.connectViaFacebook}
            color="#3B5998"
          />
        </View>
      </View>
    );
  }
}

export default LoginPage;

这是我的样式表...

 import { StyleSheet, Dimensions } from "react-native";

    const { width, height } = Dimensions.get("window");

    const LoginPageStyle = StyleSheet.create({
      title: {
        color: "green",
        fontSize: 60,
        alignItems: "center",
        justifyContent: "center",
        marginTop: 60,
      },

      bottom: {
        paddingTop: 450,
      },

      backgroundVideo: {
        height: height,
        position: "absolute",
        top: 0,
        left: 0,
        alignItems: "stretch",
        bottom: 0,
        right: 0,
      },
    });

    export default LoginPageStyle;