Phong cách được ánh xạ tới các số trong React Native như thế nào?

Question

Tôi đang làm việc trên một ứng dụng di động sử dụng React Native.

Tôi đã tạo một bộ kiểu dáng nhỏ bằng cách sử dụng ReactNative.StyleSheet và sử dụng chúng trong các thành phần của tôi.

Bây giờ tôi đã chứng kiến ​​một điều gì đó kỳ lạ ở đây. Tôi thấy rằng phong cách của tôi được ánh xạ tới một số. Lý tưởng nhất là tôi đã mong đợi một đối tượng có mặt khi tôi thử in phong cách.

Sau đây là css của tôi: -

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 
    } 
}) 

và console.log(style) chỉ cho tôi sau. Tôi đang cố gắng hiểu những con số này là gì?

Answer 1

Ý tưởng về StyleSheet.create là giảm số lần các đối tượng kiểu được tạo ra để một. Vì đối tượng sẽ luôn có cùng giá trị, nên có ý nghĩa để thực hiện điều đó và đó là cách rất đơn giản để tiết kiệm thời gian xử lý. Số mà bạn nhận được chỉ đơn giản là một tham chiếu đến đối tượng StyleSheet đã tạo.

Điều gì đó tương tự cũng xảy ra với hình ảnh tĩnh. Nếu bạn console.log giá trị của require('./myImage.png'), bạn cũng sẽ nhận được một số. Một lần nữa, cho cùng một lý do tối ưu hóa.