Свойство flexbox 'flex' в React Native

Question

Я пробираюсь через замечательные ReactNativeKatas, чтобы изучить макеты flexbox в React Native. В приведенном ниже примере flex Свойство на двух дочерних взглядов родителя View (тот, кто использует styles.container) установлен на 0.1, Установка обоих на 0.1 ставит первый View в крайней левой части дисплея и второй View в середине. Почему настройка 0.1 к flex свойство обоих View выровнять их таким образом?

const FlexSize= (props)=>{
  return (
    <View style={styles.container}>
      <View style={{flex: 0.1}}>
        <Box style={{flex: 0.7}}/>
        <Box style={{backgroundColor:'yellow'}}/>
        <Box/>
        <Box style={{flex: 0.3, backgroundColor:'yellow'}}/>
      </View>
      <View style={{flex: 0.1}}>
        <Box style={{flex: 0.5}}/>
        <Box style={{backgroundColor:'yellow'}}/>
        <Box/>
        <Box style={{flex: 0.5, backgroundColor:'yellow'}}/>
      </View>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'row',
    backgroundColor: colors[1],
  },
});

Оказывается в симуляторе:

Answer 1

Вы в основном делаете два Views одинаково по всему экрану. Поскольку оба дочерних представления имеют одинаковый цвет (backgroundColor: color[1]) кажется, что они представляют собой единый непрерывный фон.

То, что происходит, - это все блоки, которые вы визуализируете в своих дочерних представлениях. flex-start их родителей. Таким образом, ящики первого ребенка отображаются вертикально сложенными. Теперь второй ребенок должен делить равное пространство с первым. Таким образом, он начинается с "середины" экрана, как вы положили.

Чтобы лучше это представить, я предлагаю вам закомментировать все это в контейнере и попробовать вместо этого сделать это:

<View style={styles.container>
  <View style={{flex: 0.1, backgroundColor='red'}} ></View>
  <View style={{flex: 0.1, backgroundColor='blue'}} ></View>
</View>

Вы увидите, как эти представления складываются на вашем экране (обратите внимание, что у вас есть flexDirection: row в вашем container, Все коробки складываются соответственно. Я надеюсь, что вы получите объяснение.