最初、スタイルを調整していく中でちょっとした違和感や、ちょっと詰まったところがあったので、紹介します。

React Native と Vue Native のスタイル

今後やっていくにつれて新しい発見やつまるところがあると思うので、その都度更新していきます。

flex

これは慣れるまでは結構大変です。細かく説明していきます。

flexとはざっくり説明すると、要素に占める割合のことだと思ってください。

先に共通のスタイルを決めておきます。

<style>
.container {
  flex: 1;
}
.text_center{
  justify-content: center;
  align-items: center;
}
</style>

要素を２分割したい場合は以下のようになります。

<template>
  <view :style="{flex:1}">
    <view :style="{flex:1,backgroundColor:'red'}" class="text_center">
      <text>flex1</text>
    </view>
    <view :style="{flex:1,backgroundColor:'blue'}" class="text_center">
      <text>flex2</text>
    </view>
  </view>
</template>

要素を2対1に分割したい場合は以下のようになります。

<template>
  <view :style="{flex:1}">
    <view :style="{flex:2,backgroundColor:'red'}" class="text_center">
      <text>flex1</text>
    </view>
    <view :style="{flex:1,backgroundColor:'blue'}" class="text_center">
      <text>flex2</text>
    </view>
  </view>
</template>

これでなんとなく要素に占める割合ということがわかったでしょうか？

この場合flex:1の中にflex:2とflex:1があるので2:1で分割されます。

それでは高さ(height)を指定した要素があった場合どうなるでしょう。

<template>
  <view :style="{flex:1}">
    <view :style="{height:200,backgroundColor:'red'}" class="text_center">
      <text>flex1</text>
    </view>
    <view :style="{flex:1,backgroundColor:'blue'}" class="text_center">
      <text>flex2</text>
    </view>
    <view :style="{flex:2,backgroundColor:'pink'}" class="text_center">
      <text>flex3</text>
    </view>
  </view>
</template>

みてわかる通り、高さheight:200は固定で、残りの要素を1:2で分割しています。

ちょっと癖がありますが、なんとなくわかっていただけたと思います。

ローワーキャメルケース (lower camel case)

ローワーキャメルケースというのは backgroundColor このような1つめ以降の単語の頭文字が大文字になっている形のもののことです。Java、C#、Swift、JavaScript などの言語で、変数名や関数名なんかに使われています。

また、BackgroundColorのように1つ目の単語の頭文字が大文字になっているものはアッパーキャメルケースと呼ばれ、PHPのクラス名なんかで使われたりします。

background_colorのように_(アンダースコア)で単語をつなぐものをスネークケースと呼び、Mysqlなどのデータベースのテーブル名やフィールド名などで使用されたりします。

少し話が広がりすぎましたが、ReactNativeとVue Nativeのテンプレート部分ではこのローワーキャメルケースを使用します。

React Nativeはスタイルを指定するときはローワーキャメルケースですが、Vue Nativeはhtml要素のように、要素にclassを指定してそのクラスにスタイルを当てることができます。そのクラスには普通のcssの書き方でスタイルを当てることができます。

Vue Nativeは最初は記述方法が混同してスペルミスで変更が反映されなかったりするかもしれませんが、慣れれば大丈夫です。

では、テンプレート側とstyle側どちらが優先されて適応されるのか？

それは、テンプレート側に直接書き込んだ方が優先されて適応されます。以下に例を出します。

<template>
  <view class="container">
    <view :style="{flex:1,backgroundColor:'red'}" class="text_center">
      <text>flex1</text>
    </view>
    <view :style="{flex:1,backgroundColor:'blue'}" class="text_center pink">
      <text>flex2</text>
    </view>
  </view>
</template>
<script>
import React, { Component } from 'react';
import { View, Animated,Text } from 'react-native';
export default {
  data: function() {
    return {
    };
  },
};
</script>
<style>
.container {
  flex: 1;
}
.text_center{
  justify-content: center;
  align-items: center;
}
.pink{
  background-color: pink;
}
</style>

この場合、テンプレート側でblueが、pinkというクラスがstyle側でbackground-color:pinkとして指定されています。この結果が、

このようになり、blueが表示されています。つまりテンプレート側のスタイルが優先的に適応されます。

html,cssのようにクラスを指定することができるのでstyleの記述量が減るのはいいのですが、一箇所だけ適応させたい場合、テンプレートで直接スタイルを指定すると、予期せぬデザインになったりするので、慎重にスタイルを当てるようにしましょう。

まとめ

これらは慣れてしまえば簡単なので、触って感覚をつかめば大丈夫です。

まだいくつか詰まる場所があるのですが、まとまり次第追記します。