React Native Web Error: Uncaught ReferenceError: styles is not defined

Question

我正在尝试使用 React Native 制作应用程序原型，兼容 WEB 浏览器，并且 iOS。 iOS 模拟器渲染没有任何问题，但网络浏览器却给我错误。使用定义样式的外部文件时会发生这种情况。

webbrowser链接外部样式文件和iOS有区别吗？

当在js文件中包含样式代码时，它没有任何问题，但是当尝试将样式代码制作为外部文件时出现错误。

错误：

ReferenceError: styles is not defined

样式代码（外部文件）

import { StyleSheet } from 'react-native';

export default styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddd',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

试图导入样式的主 js 文件

import React from 'react';
import { Text, View, } from 'react-native';
import styles from '../styles.js'

export default class Profile extends React.Component{

  render(){
    return (
      <View style={styles.container}>
        <Text>Profile</Text>
      </View>
    );
  }
}

Answer 1

我认为问题在于对变量的赋值，试试这个，

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddd',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

或者可能是这个，

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddd',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default styles

或者你可以这样做，

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddd',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

然后导入为，

import { styles } from '../styles'  //Make sure the path is correct

注意：我对文件路径存疑。基本上 main.js 文件位于 src 文件夹中，并且导入路径为 ../ 的文件意味着您要向上移出 1 个文件夹。如果 styles.js 文件与 main.js 文件在同一个文件夹中，您只需要像这样导入，

import { styles } from './styles'  //Here `./` means the same folder.

Answer 2

确保样式表是从 react-native 模块导入的

import {StyleSheet} from "react-native";

React Native Web Error: Uncaught ReferenceError: styles is not defined

React Native Web Error: Uncaught ReferenceError: styles is not defined

styles

react-native

react-native-web

expo