只能在Android上的对象上调用Object.freeze

时间:2017-04-18 15:20:22

标签: javascript android css reactjs react-native

我的 Object.freeze只能在对象上调用(仅限在Android上)。

经过深入研究后,我发现这是因为我在不同的文件夹中引用了所有样式,Android对此并不满意。

Github Issue

Image

我的文件夹结构

  • 的src

    • 动作
    • 容器
      • Home.js(有风格)
    • 部件
    • 样式
      • calculateSize.js
      • index.js
  • 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;
&#13;
&#13;

index.js

&#13;
&#13;
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;
&#13;
&#13;

1 个答案:

答案 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之间的实现存在差异。