Jak style są zamapowane na liczby w React Native?

Question

Pracowałem nad aplikacją mobilną, używając React Native.

Stworzyłem mały zestaw stylów przy użyciu ReactNative.StyleSheet i używam ich w moich komponentach.

Teraz byłem świadkiem czegoś szczególnego tutaj. Widzę, że moje style są odwzorowane na pewną liczbę. Idealnie spodziewam się, że obiekt będzie obecny przy próbie drukowania stylu.

Poniżej mój 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 
    } 
}) 

i console.log(style) pokazuje mi następujący. Próbuję zrozumieć, co to są te liczby?

Answer 1

Pomysł StyleSheet.create jest zmniejszenie liczby przypadków przedmiotem stylów jest tworzony do jednego. Ponieważ obiekt zawsze będzie miał te same wartości, ma to sens i jest to bardzo prosty sposób na zaoszczędzenie czasu przetwarzania. Liczba, którą otrzymujesz, jest po prostu odniesieniem do utworzonego obiektu StyleSheet.

Coś podobnego dzieje się również z obrazami statycznymi. Jeśli podasz console.log wartość require('./myImage.png'), dostaniesz również numer. Ponownie, z tych samych powodów optymalizacji.