Question

如何在react-native中结合多个内联样式对象和内联CSS？

它具有3个样式对象TimelineGreenColor，TimelineLeftBorder，TimelineLeftLine用于视图div

  const stylesB = StyleSheet.create( {
     TimelineGreenColor:
     {
       backgroundColor: "green",
     },
     TimelineLeftBorder:
     {
       position: 'absolute',
       width: 4,
       backgroundColor: "green",
       height: '100%',
       left: 4,
       top: 15,
     },
     TimelineLeftCircle:
     {
       position: 'absolute',
       width: 12,
       height: 12,
       backgroundColor: "green",
       top: 12,
       borderRadius: 50,
       left: 0,
       /*boxShadow: "0px 0px 10px -2px black",*/
     },
     TimelineLeftLine:
     {
       position: 'absolute',
       width: 15,
       height: 3,
       backgroundColor: "green",
       top: 16,
       left: 5,
   }

   <View style={how to write styles in react-native ??????????}></View>

Answer 1

类型1：如果您有一种内联样式

<View style = {{marginLeft: 7,paddingRight: "9%"}}></View>

类型2：如果样式对象中有一种样式

<View style = {styles.TimelineLeftBorder}></View>

类型3：如果您有来自样式对象的两种或多种样式

<View style = {[styles.TimelineLeftBorder,styles.TimelineGreenColor]}></View>

类型4：如果您有来自样式对象的两种或多种样式，并且还希望提供普通的内嵌CSS，则

<View style = {[styles.TimelineLeftBorder,styles.TimelineGreenColor,{marginLeft: 7}]}></View>

Answer 2

只需在样式道具中以数组形式传递所有样式对象。

<View style={[stylesB.TimelineGreenColor,styleB.TimelineLeftBorder,styleB.TimelineLeftCircle,styleB.TimelineLeftLine]}/>

请记住，如果样式样式为多种，则样式支持接受样式对象的数组；如果样式为单一样式，则接受样式对象的对象。

如何在react-native中组合多个内联样式对象和内联css？

2 个答案: