如何将样式映射到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的想法是将样式表对象的创建次数减少到一次。由于对象将始终具有相同的值，因此这样做是有意义的，这是一种节省一些处理时间的简单方法。您获得的数字只是对创建的StyleSheet对象的引用。

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

Answer 2

我对Platform.select函数也有类似的情况。

const styles = StyleSheet.create({
    web: {
        width: '50%',
    },
    android: {
        width: '100%',
    }
});


console.log(
    Platform.select({
        web: styles.web,
        android: styles.android
    })
)

在android上，console.log的结果是具有样式的有效对象，但在Web中是参考编号。即使我直接在组件样式中使用了此样式，对于Web样式也无法正确应用，例如。

<TouchableOpacity style={{Platform.select({
                web: styles.saveTouchableWeb,
                android: styles.saveTouchableAndroid
            })
        }} .....

我发现解决方案可以是StyleSheet.flatten，但也许有更好的方法或实践来解决它？

Platform.select({
    web: StyleSheet.flatten(styles.web),
    android: styles.android
})