RN에서 View를 그릴 때

box-sizing

안드로이드, ios 모두 border-box 모델을 사용하는 것처럼 느껴진다.

import { View, Text } from "react-native";

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: "stretch" }}>
      <View
        style={{
          width: 100,
          height: 100,
          margin: 20,
          padding: 20,
          borderWidth: 10,
          borderColor: "red",
          borderStyle: "solid",
          justifyContent: "center",
          backgroundColor: "yellow",
        }}
      >
        <Text>hi</Text>
      </View>
    </View>
  );
}

expected

- 100, 100의 dimension

- margin 20은 스크린의 상하좌우를 밀어냄

- padding 20은 TextArea의 컨텐츠 영역과 border 경계

- border는 패딩 바깥에서 10만큼 존재할 것

- View의 컨텐츠 영역 실제 크기는 40, 40 dimension. Text는 폰트 크기만큼의 높이와 40만큼 차지할 듯. (stretch 때문에)

received

오... Border가 박스  '안'에서 자리를 차지함. 그러니까, 컨텐츠 영역의 크기는 보더 + 패딩만큼 줄어드네.. 이건 큰 차이네

나머지는 추론한 것과 같음.

The border in Android and iOS (React Native) is drawn inside of the component box, which effectively reduces the amount of padding when a border is applied.

This means that if you specify a border in React Native, it will actually shrink the content area of the box by the border size, rather than expanding the box as it would in CSS. The reason behind this is largely historical and due to different rendering traditions and layouts in web vs. native environments. React Native chooses to respect the native behavior in these cases for consistency.

To make the React Native border behavior match the CSS border behavior, you would have to manually adjust your layout (probably by adding additional padding equal to your border size). However, such manual adjustments would be necessary only if you are trying to perfectly match layouts between web and native platforms.

 

flexbox

https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

	ReactNative	CSS
flexDirection	column	row
justifyContent	flex-start	flex-start
alignItems	stretch	stretch
flexGrow	0	0
flexShrink	0	1
flexBasis	'auto'	'auto'

 

https://reactnative.dev/docs/flexbox#flex-basis-grow-and-shrink