react-native - 在React Native中样式如何映射到数字？

Question

我当时正在使用React Native开发一个移动应用程序。

我使用ReactNative.StyleSheet创建了一小组样式，并在我的组件中使用它们。

现在我在这里目睹了一些奇特的事情。我看到我的样式映射到了一些数字。理想情况下，当我尝试打印样式时，我希望有一个对象存在。

以下是我的CSS:

const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems:'center',
    width: null,
  },
  logo: {
    width:110,
    marginTop:84,
    resizeMode:'contain'
  },
  mascot:{
    width:145,
    height:150,
    marginTop:73,
    resizeMode:'contain'
  },
  button:{
    backgroundColor:'#4A90E2',
    width:300,
    alignSelf:'center',
  },
  buttonContainer:{
    marginTop:70
  }
})

console.log(style)向我展示了以下内容。我试图了解这些数字是什么？

Answer 1

StyleSheet.create的想法是将样式表对象的创建次数减少为1。由于对象将始终具有相同的值，因此这样做很有意义，并且这是节省一些处理时间的非常简单的方法。您获得的数字只是对创建的StyleSheet对象的引用。

静态图像也会发生类似的情况。如果您用console.log的值require('./myImage.png')，您还将得到一个数字。同样，出于相同的优化原因。