Question

我的样式对象：mainModule/styles.js

export default StyleSheet.create({
  container: {
    width: 0
  },
  basicInfo: {
    height: 167,
    backgroundColor: 'red,
    justifyContent: 'center',
    alignItems: 'center'
  }
}

导入import generalStyle from '@mainModule/styles'时（我创建了一个package.json文件以使该路径有效） 控制台日志显示如下：

对象{ 容器：10， basicInfo：118 }

这里的任何人都可以帮助我吗？

Answer 1

@NellyNgo，你可能试图压扁StyleSheet.create返回的整个对象。我做了同样的事情，这让我发疯，因为它似乎对其他所有人都有用，但对我来说，它返回了我传给它的相同价值。实际上，flatten将适用于StyleSheet.create创建的对象的单独属性。像这样：

const styles = StyleSheet.create({prop: {...}, prop2: {...})

然后你可以StyleSheet.flatten(styles.prop)

检查node_modules / react-native / Libraries / StyleSheet / flattenStyle.js中的代码。那是我失败的地方。

 function getStyle(style) {
          if (typeof style === 'number') {
            return ReactNativePropRegistry.getByID(style);
          }
          return style;
     }

如果感兴趣，请检查整个来源

我的RN版本是0.41.2

Answer 2

StyleSheet.create创建缓存的样式ID，以减少通过桥的数据量。

您可以使用它们并且它们可以完美地工作，但如果您需要在导入后更改它们，则应该导出样式对象而不使用StyleSheet.create。

Answer 3

在 styles.js ：

中

const stylesObj = {
  container: {
    width: 0
  },
  basicInfo: {
    height: 167,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center'
  }
}

export default stylesObj

在组件中：

import stylesObj from 'styles'

const styles = StyleSheet.create(stylesObj)

Answer 4

export default YourStyle = StyleSheet.create({
  container: {
    width: 0
  },
  basicInfo: {
    height: 167,
    backgroundColor: 'red,
    justifyContent: 'center',
    alignItems: 'center'
  }
}

然后import YourStyle from './YourStyle';

React Native：导出后StyleSheet对象中的所有样式都转换为数字类型

4 个答案: