WebとReact NativeのCSSの違いについて

この記事は CSS Advent Calendar 2019 24日目の記事です。

8月からアプリエンジニアとしてReact Nativeを触っているのですが、WebのCSSと比べて違う部分があったので記事にしようと思いました。

fixedが存在しない

個人的に、初めてReact Nativeをいじっていて衝撃的でした。
Webではある要素を固定したい場合、position: fixedを使うのが普通ですが、React Nativeではpositionで用意されているプロパティ値はrelativeとabsoluteしかありません。

ではどうすれば要素を固定できるのかというと、
ScrollViewというものを使います。

コードは以下のような感じです。

<>
  <View style={{
    position: 'absolute',
    top: 300,
    width: 100,
    height: 100,
    backgroundColor: '#FF0000'}}>
    <Text>fixed</Text>
  </View>
  <ScrollView>
    <View style={[styles.container, {justifyContent: 'center'}]}>
      <Text>hoge</Text>
      <Text>hoge</Text>
      <Text>hoge</Text>
      <Text>hoge</Text>
      <Text>hoge</Text>
            ・
            ・
            ・
            ・
    </View>
  </ScrollView>
</>

const styles = StyleSheet.create ({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})

固定したい要素はScrollViewに含ませないようにしてあげます。
そうすることで、Fixedの要素はスクロールの対象外となるので固定されるようになります。

このような感じになります。

margin/padding

例えばWebだと上下左右にmarginを20pxずつ開けたい場合は

.hoge: {
  margin: 20px;
  padding: 20px;
}

と書いてあげれば上下左右にそれぞれ20pxずつmarginが指定されます。

React Nativeだと

.hoge: {
  marginTop: 20px,
  marginRight: 20px,
  marginBottom: 20px,
  marginLeft: 20px,
  paddingTop: 20px,
  paddingRight: 20px,
  paddingBottom: 20px,
  paddingLeft: 20px,
}

という書き方になり、それぞれの方向にmarginを指定してあげないといけません。
ちょっと冗長ですがReact Nativeだとこのような書き方になります。

boxShadow

例えば

• 水平方向の影のオフセット距離 10px
• 垂直方向の影のオフセット距離 10px
• ぼかし距離 10px
• 広がり距離 10px
• 影の色 #000
• opacity 0.4
  という指定のbox shadowを指定したい場合はWebだと

.hoge: {
  box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
}

のような書き方になるかと思います。

React Nativeだと

.hoge: {
  shadowColor: '#000',
  shadowRadius: 10, 
  shadowOpacity: 0.6,
  shadowOffset: {
    width: 10,
    height: 10
  }
  width: 100,
  height: 100,
  backgroundColor: '#00ffff',
}

となります。

shadowColorはWebのbox shadowでいう影の指定になります。
shadowOffsetはWebのbox shadowでいう水平方向の影のオフセット距離と垂直方向の影のオフセット距離の指定になります。
shadowRadiusはWebのbox shadowでいうぼかし距離になります。

広がり距離に関してはshadowのドキュメントみても見当たらなかったのでないのかも？

上記で書いたコードの出力は以下のような感じです。

ちゃんと影がついてますね。

プロパティはコンマ区切り

cssの場合はプロパティの末尾にセミコロンをつけてプロパティを区切るのが一般的ですが、React Nativeですと基本コンマで区切ります。

基本の記述方法はキャメルケース

Webだと例えば、背景の色を変えたい場合はbackground-colorを使いますが、React Nativeだとケバブケースは使えません。
React NativeだとbackgroundColorと記述します。
基本的にはキャメルケースでの記述になってます。

まとめ

普段Webに慣れていた分、React Nativeでcssを初めて書いたときはすごい違和感がありました。
とくに要素の固定に関しては最初ちょっと使いづらかったですw

React Nativeはまだまだ発展途上のモバイルアプリケーションフレームワークですが、普段Webに慣れている方なら敷居はかなり低いと思いますので、興味ある方は是非触ってみてください。