StyleSheet.createでオブジェクトを取得する方法（リアクションネイティブ）

Question

const styles = StyleSheet.create({ 

    container : { 
     flex : 1, 
     backgroundColor : config.getColor('bg'), 
    }, 
    title : { 
     marginLeft : 80, 
     marginTop : 30, 
     height : 35, 
     width : 100, 
     borderRadius : 17, 
     borderWidth : 1, 
     borderColor : config.getColor('theme'), 
     fontSize : 17, 
     color : config.getColor('theme') 
    } 
}); 

私がconsole.log styles.titleのときにnumber.soをオブジェクトに変換する方法は？

Answer 1

あなたはflattenメソッドを使用することができます。

例：

StyleSheet.flatten(styles.title) 

Answer 2

ジャンの答えは非常に良いです。しかし、私は毎回StyleSheet.flattenを繰り返さないためにこのパターンを使用します。

import { StyleSheet } from 'react-native' 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     display: 'flex', 
     justifyContent: 'space-between', 
     padding: 20, 
    }, 
}) 

export default Object.keys(styles).reduce((newObject, key) => ({ 
    ...newObject, 
    [key]: StyleSheet.flatten(styles[key]) 
}), {})