[React Native] IOS & Android 스타일링 차이점, 상속여부

goalItem 스타일

<Text key={goal} style={styles.goalItem}>{goal}</Text>

위의 코드에 goalItem 스타일을 적용해보았을 때, 안드로이드, ios를 비교해보면

안드로이드에는 적용이 되었지만 ios는 적용이 되지 않은 것을 볼 수 있다.

ios 적용 X

ios에는 테두리를 둥글게 하는 속성이 적용이 되지 않았다.

ios에서 기본 네이티브 <Text> 태그에 둥근 모서리 스타일을 지원하지 않는 것이다.

이러한 경우, View 태그로 <Text>태그를 감싸서 View 태그에 지정해주면 된다.

 

<View key={goal} style={styles.goalItem}>
	<Text>{goal}</Text>
</View>

Text 태그에 바로 스타일을 지정하지 않고 View 태그를 감싼 후 View 태그에 스타일을 지정해주었더니

ios에도 둥근 테두리가 적용이 되었다. 하지만 뭔가 다른 점은 ..  이번에는 텍스트 색상이 적용되지 않았다.

둥근 테두리는 O, 텍스트 색상X

그 이유는 웹용 css와 달리 스타일이 연속적으로 적용되지 않기 때문이다.
연속적인 속성 적용은 부모와 조상 요소의 스타일이 자식 및 하위 요소에 그대로 이어지는게 특징인데
React Native 스타일링에는 스타일 상속이 없다.

 

그러므로, View 태그에 적용된 color:white는 하위 속성인 text 태그에 영향을 주지 않게 되는 것이다.

그래서 이러한 경우는 별도로 Text 태그에 color:white를 지정해주어야한다.

<View key={goal} style={styles.goalItem}>
	<Text style={styles.goalText}>{goal}</Text>
</View>

이렇게 Text 태그에도 별도로 스타일을 지정해주고, 지정된 goalText 스타일에 color:white을 적용했다.

그랬더니 이제는 ios, android가 동일하게 맞추어졌다.

 

상속여부와 ios에서 지원되지 않는 것들이 안드로이드와 달라서 같은 코드를 적용함에도 불구하고 적용되지 않는 부분들이 있다. 이것 말고도 다른 것들이 많을 것 같은데 ,, 공부하면서 발견할 때마다 잊지 않도록 기록해야겠다.