Ширина и высота в реакции-родной

Question

поясните, по какому принципу формируются размеры вида со стилем элемента. Я изучил FlexBox, однако он нарушает все мое понимание.

code

export const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.element}>
          <View style={styles.element1}></View>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: 'green',
  },
  element: {
    // width: '100%',
    // height: '100%',
    backgroundColor: 'yellow',
    // top: '5%',
  },
  element1: {
    width: '50%',
    height: '80%',
    backgroundColor: 'red',
  },
});

Answer 1

Вы можете использовать flex: 1 вместо width: '100%', height: '100%',.

Flex: 1 означает, что компонент (в случае представления) имеет значение приоритета 1, что означает, если есть ' Если другой компонент в том же виде с flex: 1, компонент займет весь экран. Если есть два компонента с flex: 1, каждый из них будет занимать 50% от всего экрана.

Вот документация: Реагирует на собственный flexbox