< Back

React Nativeを書いててCSSの設計についてすごく考えたときの小話

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 に書くぜ :raised_hand: :raised_hand: :raised_hand: :raised_hand: 

li {
    font-size: 20px;
}

文字列のすぐ上の要素の a に書くぜ :hand_splayed: :hand_splayed: :hand_splayed: :hand_splayed: 

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

でいろいろ試せると思います。

いろいろ見てみる

エラーとかわかる人は自分でみてみてください！！こんな感じ。

スクリーンショット 2020-03-11 2.33.44.png

<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 a とかをスタイリングするときは少しだけ考えるようになりました。

こちらの React Native for Webをプロダクションで使ってみました というブログでもReact Native for Webを使ってWeb系の方が苦戦しているのが垣間見れます。

おわりに

ReactNative では li 要素にフォントサイズは効きませんでした。ですが、HTML5としてはどっちでもいいと思います。新しい技術を触ると今までの考え方が更新されるのでとても新鮮な気持ちになれますよね。これからは同じ <div> でも スタイルを整えるため に入れたのか 文字を入れるため に入れた要素なのか意識していきたいです。

お試しで書いていたらすごく考えさせられたのでその時のことを書いていきます。ありがとうございました。！！！！
（Webだけで生きていたので、ギブス巻かれたようにエラー出しまくりました。React Nativeはいまでも初心者です。）

.