Question

我不确定为什么，但是我的应用程序不喜欢我为组件创建的StyleSheet。在index.js（顶层）中，我导入全局变量 import global from './src/global'; 然后我在{em> /src/styles.js 的styles.js文件中使用global.width（已正确设置为屏幕宽度）。然后，我从样式文件中导出各种样式，例如下面的“按钮”。最后，在按钮组件中，我使用数组表示法来响应本机样式，为组件提供了几种宽度（假定最高索引优先），但我只是报错。

导出的“按钮” StyleSheet示例

...
padding: 12,
margin: 10,
//width: global.width/2.0,
alignSelf: "center",
marginTop: "auto",
...

按钮组件

      <TouchableOpacity
      onPress={this.props.onPress}
      style={[
        button.regularContainer,
        styles.localButtonStyle,
        this.props.style,
      ]}>
        <Text style={[
          button.regularText,
          styles.localTextStyle,
          this.props.textStyle,
        ]}>
          {this.props.title || 'Button'}
        </Text>
      </TouchableOpacity>

错误

Invariant Violation: [33,"RCTView",541,{"color":4278190080,"textAlign":"center","width":"<<NaN>>","backgroundColor":1308622847,"borderWidth":0,"borderColor":4294967295,"marginTop":40}] is not usable as a native method argument

如果我从与组件交互的三个样式表中的大多数中删除width元素，这些错误就会消失： button.regularContainer ， styles.localButtonStyle ，此.props.style

global.js

import React from 'react';

import {
  Dimensions,
  Platform,
} from 'react-native';

let global: {
  HermesInternal: null | {}
};

global.width = Dimensions.get('window').width
global.height = Dimensions.get('window').height
global.ios = Platform.OS === 'ios'

export default global;

Answer 1

该错误似乎是试图为宽度分配一个NaN（不是数字）值。

global.width / 2.0肯定会产生有效数字吗？

我建议用实际数字替换此变量的划分，然后查看错误是否仍然发生。

反应本机StyleSheet global.js变量样式错误

1 个答案: