Question

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

将外部样式文件与webbrowser和iOS链接会有任何区别吗？

当将样式代码包含在js文件中时，它可以正常工作，但是在尝试将样式代码外部化时会发生错误。

错误：

ReferenceError：未定义样式

样式代码（外部文件）

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错误：未捕获ReferenceError：样式未定义

2 个答案: