4
我得到Object.freeze只能(仅适用于Android)呼吁的对象。获得Object.freeze只能在对象被称为Android上
一些深层次的研究,我发现,这是因为我引用我的风格在不同的文件夹中,Android是很不高兴。
我的文件夹结构
SRC
- 行动
- 集装箱
- Home.js(有风格)
- 组件
- 风格
- calculateSize.js
- index.js
App.js
Router.js(有风格)
正如你可以看到模拟器开始于
Router.js: 9
相当于
import styles from './styles'; // Line 9 in Router.js
朗抱怨故事总之,如果我在想要做st的文件中创建本地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);
}
指数。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
}
})
}
})
谢谢!但是我不明白为什么JSC版本之间存在差异,你能解释一下吗? –