React Native를 쓰고 CSS 설계에 대해 굉장히 생각했을 때의 이야기

HTML5 를 쓰고 있는 여러분은, 다음과 같은 컴퍼넌트가 있을 때에 폰트 사이즈를 어디에 정의합니까?

<li>
  <a href="/home">home</a>
  <a href="/about">about</a>
  <a href="http://google.co.jp/">google</a>
</li>

상속하면 좋기 때문에 li 에 쓰자

li {
    font-size: 20px;
}

문자열 바로 위에 요소 a 에 쓰기

a {
    font-size: 20px;
}

그런데 React Native에서는 어떻게 쓸까요? 그것을 봅니다.

환경 구축

여기를 참고로 구축했습니다. React Native for WEB
react-native-web 사용

# プロジェクト作成
npx create-react-app react-native-web-simple

# ディレクトリ移動とnpmモジュールのインストール
cd react-native-web-simple
yarn add react-native-web

# リンク先に書かれているように2ファイルを編集
vim src/index.js
vim src/App.js

여러가지 시도할 수 있다고 생각합니다.

여러가지 봐

에러라고 아는 사람은 스스로 봐 주세요! ! 이런 느낌.


<View> 라는 컴퍼넌트는 캐릭터 라인을 넣기 위한 컴퍼넌트가 아니기 때문에 Unexpected text node: ここはエラーがでる. A text node cannot be a child of a <View>. 라고 말해집니다.

<View style={[{ fontSize: '50px' }]}>ここはエラーがでる</View>

그래서 다음과 같이 씁니다.

<View>
  <Text>ここはエラーがでない</Text>
</View>

list 형식의 FlatList 라는 컴퍼넌트에 폰트 사이즈를 건네주어도 문자는 커지지 않습니다.

<FlatList
  style={[{ fontSize: '50px' }]} // style効かないよ！！
/>

간략한 요약

MECE가 아닐지도 모르지만 <Text> 로 대표되는 대로 문자열을 넣을 수 있는 컴포넌트와 View 로 대표되는 것과 같은 문자열은 들어가지 않고 상자 크기 등을 조정하는 마크업용 구성 요소가있는 느낌이 있습니다.

ReactNative를 조금 쓴 덕분에 HTML5를 쓰고있을 때 div li
이 React Native for Web을 프로덕션에서 사용해 보았습니다. 라는 블로그에서도 React Native for Web을 사용하여 Web계 쪽이 고전하고 있는 것이 엿볼 수 있습니다.

결론

ReactNative에서는 li 요소에 글꼴 크기가 적용되지 않았습니다. 하지만 HTML5로는 어느 쪽이라도 좋다고 생각합니다. 새로운 기술을 만지면 지금까지의 생각이 갱신되기 때문에 매우 신선한 기분이 될 수 있지요. 앞으로는 같은 a 하지만 <div> 에 넣었는지 スタイルを整えるため 에 넣은 요소인지 의식하고 싶습니다.

시험으로 쓰고 있으면 굉장히 생각하게 되었으므로 그 때의 일을 써 갑니다. 고마워요. ! ! ! !
(웹만으로 살아 있었기 때문에, 깁스 감겨진 것처럼 에러 내버렸습니다.React Native는 지금도 초보자입니다.)

.