我的 Object.freeze只能在对象上调用(仅限在Android上)。
经过深入研究后,我发现这是因为我在不同的文件夹中引用了所有样式,Android对此并不满意。
我的文件夹结构
的src
App.js
Router.js(有样式)
正如您所见,模拟器开始抱怨
Router.js: 9
对应
import styles from './styles'; // Line 9 in Router.js
长话短说,如果我在想要做样式的文件中创建本地StyleSheet变量非常烦人,问题就会消失。
之前有人遇到过这种情况吗?我无法找到解决方案:(
这是我的样式索引,也许某些方法呈现未定义且我不知道它
calculateSize
import { Dimensions } from 'react-native';
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
// Calculating ratio from iPhone breakpoints
export const ratioX = deviceWidth < 375 ? (deviceWidth < 320 ? 0.75 : 0.875) : 1 ;
export const ratioY = deviceHeight < 568 ? (deviceHeight < 480 ? 0.75 : 0.875) : 1 ;
// Set our base font size value
const base_unit = 16;
// Simulating EM by changing font size according to Ratio
const unit = base_unit * ratioX;
export default function em(value) {
return (unit * value);
}
&#13;
index.js
import { Dimensions, StyleSheet, Platform } from 'react-native';
import em from './calculateSize';
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;
export const colors = {
gray: '#888888',
};
export default StyleSheet.create({
//
// STATICS
//
DEVICE_WIDTH: deviceWidth,
DEVICE_HEIGHT: deviceHeight,
RATIO_X: em.ratioX,
RATIO_Y: em.ratioY,
UNIT: em(1),
PADDING: em(1.25),
FONT_SIZE: em(1),
FONT_SIZE_SMALLER: em(0.75),
FONT_SIZE_SMALL: em(0.875),
FONT_SIZE_TITLE: em(1.25),
//
// REACT-NATIVE-ROUTER-FLUX
//
navigationBarStyle: {
backgroundColor: '#dd2c00',
borderBottomWidth: 0,
},
navTitleStyle: {
color: 'white',
},
navBarButton: {
position: 'absolute',
top: 10,
},
navBarLeftButton: {
left: 10
},
navBarrightButton: {
right: 10
},
//
// GENERALS
//
testShit: {
borderColor: 'red',
borderWidth: 2
},
centerEverything: {
justifyContent: 'center',
alignItems: 'center',
},
authContainer: {
flex: 1,
paddingTop: 50,
},
bitOfTransparent: {
backgroundColor: 'rgba(0,0,0,.5)'
},
//
// AUTHS
//
spanImage: {
height: deviceHeight,
width: deviceWidth,
},
statusBarSpan: {
width: deviceWidth,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
top: 20,
paddingLeft: 15,
paddingRight: 15,
position: 'absolute'
},
residentValetUpperContainer: {
flex: .25,
width: deviceWidth*0.8
},
residentValetBottomContainer: {
flex: .75,
width: deviceWidth,
alignItems: 'center',
justifyContent: 'flex-end',
paddingBottom: 20
},
residentValetBottomContainerField: {
justifyContent: 'flex-start'
},
residentValetText: {
fontSize: em(1)*1.5,
letterSpacing: 10,
textAlign: 'center',
color: '#fff',
backgroundColor: 'transparent',
},
residentValetDesc: {
fontSize: em(1)*1.25,
letterSpacing: 0,
flexWrap: 'wrap'
},
helLight: {
fontFamily: 'HelveticaNeue-Light',
},
loginButton: {
flexDirection: 'row',
width: deviceWidth*0.9,
height: 50,
backgroundColor: 'transparent',
borderColor: '#fff',
borderWidth: 1,
borderRadius: 3,
},
loginButtonText: {
fontSize: em(1),
color: '#fff',
paddingLeft: 10,
},
policyText: {
fontSize: em(0.85),
color: '#fff',
backgroundColor: 'transparent'
},
nextButtonText: {
fontSize: em(1.25),
fontWeight: '500',
backgroundColor: 'transparent'
},
container: {
flex: 1,
...Platform.select({
ios: {
marginTop: 64
},
android: {
paddingTop: 54
}
})
}
})
&#13;
答案 0 :(得分:4)
错误是由于StyleSheet.create
电话中的非对象属性造成的,即 -
//
// STATICS
//
DEVICE_WIDTH: deviceWidth,
DEVICE_HEIGHT: deviceHeight,
RATIO_X: em.ratioX,
RATIO_Y: em.ratioY,
UNIT: em(1),
PADDING: em(1.25),
FONT_SIZE: em(1),
FONT_SIZE_SMALLER: em(0.75),
FONT_SIZE_SMALL: em(0.875),
FONT_SIZE_TITLE: em(1.25),
StyleSheet.create
仅支持样式对象,而不支持任何随机属性。
您只能在Android中获得错误,因为不同版本的JSC之间的实现存在差异。