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

【问题标题】：How to combine multiple inline style objects and inline css in react-native?如何在 react-native 中组合多个内联样式对象和内联 css？
【发布时间】：2020-02-15 08:45:12
【问题描述】：

如何在 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>

【问题讨论】：

标签： android css react-native styles stylesheet

【解决方案1】：

只需在样式属性中传递数组中的所有样式对象。

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

请记住，style prop 在多个样式的情况下接受样式对象数组，在单个样式的情况下接受样式对象的对象。

【讨论】：

【解决方案2】：

类型 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>

【讨论】：