Как объединить несколько объектов встроенного стиля и встроенного CSS в Reaction-native?

Question

Как объединить несколько объектов встроенного стиля и встроенного 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

просто передайте все объекты стилей в массиве в стиле prop.

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

Помните, что свойство prop принимает массив объектов стиля в случае нескольких стилей и объект объекта стиля в случае одного стиля.