React Native Web 错误:未捕获的引用错误:未定义样式

Question

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

将外部样式文件与网络浏览器和iOS链接是否有任何区别？

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

错误：

引用错误：未定义样式

样式代码(外部文件(

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

确保 StyleSheet 是从 react-native 模块导入

的

import {StyleSheet} from "react-native";