ReactNativeアプリでスタイリングを使用する方法

序章

React Nativeを使用する場合、デフォルトではHTMLとCSSをWebアプリケーションとして使用しません。

実際、箱から出してすぐに、すべてがFlexboxに基づいて自動的にスタイル設定されます。

この記事では、ReactNativeアプリケーションにスタイリングを適用する方法を紹介します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

CSSのプロパティと値の使用に精通していること。
ReactNativeでのJSX構文の使用に精通していること。

`StyleSheet`を使用する

React Nativeスタイリングについて最初に知っておくべきことは、StyleSheetコンポーネントを使用することです。

まず、次のようにインポートします。

import { StyleSheet } from 'react-native';

その後、次のように使用できます。

const styles = StyleSheet.create({
  container: {
    height: 100
  }
})

次に、次のようにコンポーネントを適切にスタイル設定するために追加します。

<View style={styles.container}></View>

次のように、インラインルートを使用することもできます。

<View style={{height: 100}}></View>

このコードでも同じ結果が得られます。

ピクセルの処理

height: 100の100にユニットが表示されていないことに気付いたかもしれません。 px、vmなどの書き方に慣れているかもしれません。そして問題は、React Nativeでデフォルトで使用されるユニットは何ですか？

これは非常に複雑な質問であり、回答するのに複数の記事が必要です。 iOSの場合、これらは「論理的なポイント」であり、AndroidはDIPを使用します。これには多くの理由があり、なぜこれが選ばれたのかについての論理もあります。同じ画面サイズには、さまざまな画面サイズとさまざまな解像度があります。したがって、通常のピクセルを使用した場合、一部の電話ではピクセル化されたように見えます。しかし、「ポイント」の背後にある考え方は、ピクセル密度の高い高解像度の画面でも、低解像度の画面と同じように見えるようにすることです。

完璧ではありませんが、プラットフォーム間でほぼ同じように見えます。 height、width、borderWidthなどが画面上でどのように表示されるかを決定するために舞台裏で行われる計算があります。

'auto'またはパーセンテージを使用することもできますが、次のように引用符で囲みます。

<View style={{ height: '100%' }}></View>

このコードは、フルハイトViewを生成します。

画面全体をラップする

ここで、<View>を設定して画面全体に表示することについて知っておくべきことの1つは、iPhone Xのような電話の画面の一部がユーザーインターフェイス（UI）で覆われていることです。通常、要素を配置する画面の一部は、画面の覆われた部分の下に非表示になります。

このためには、ReactNativeコンポーネント<SafeAreaView>を使用して残りのコンポーネントをラップすると、すべての画面が確実に表示されます。

または、flex: 1を使用することもできます。

React NativeはデフォルトでFlexboxを使用するため、display: flexの適用について心配する必要はありません。また、デフォルトでflexDirectionがrowに設定されているWebバージョンとは異なり、ReactNativeは[X11X]に設定されたflexDirectionを使用します。スタイルをflex: 1に設定すると、コンポーネントにflex-growが適用され、Flexboxコンテナの主軸全体を占有します。

どちらのアプローチでも、コンテンツが表示されたままになります。

マージンとパディングの追加

Webでは、marginおよびpaddingの省略形を使用できます。

ただし、React Nativeには、マージンとパディングを適用するための追加のスタイリングヘルパーがあります。

たとえば、要素に20の上下マージンを与えるには、次のように設定できます。

<View style={{marginVertical: 20}}></View>

上部と下部にパディングを付けることもできます。

<View style={{paddingVertical: 20}}></View>

「垂直」のヘルパーに加えて、「水平」のヘルパーもあります：paddingHorizontalおよびmarginHorizontal。

マージンとパディングの終わりにタグ付けできる「開始」と「終了」もあります。スタイルに「開始」と「終了」が表示されている場合は常に、これらがコンテナのflexDirectionに依存していることがわかります。

flexDirectionがrowの場合、marginStartはmarginLeftのように動作します。

flexDirectionがrow-reverseの場合、marginStartはmarginRightのように動作します。

また、「開始」と「終了」はmarginLeftとmarginRight、paddingLeftとpaddingRightをオーバーライドすることに注意してください。

影と境界線の追加

CSSの通常のborderスタイルは、ReactNativeスタイルでは使用できません。 borderColorとborderWidthに分解する必要があります。これらの2つが示されているので、境界線を作成するのに十分です。また、どちらの側がどの色と幅を受け取るかを選択できます。

borderRadiusもありますが、これは、ご存知のとおり、各コーナーに半径を与えます。 top-start、top-end、bottom-start、またはbottom-endを使用して、borderTopStartRadius: 20のように個々の半径を選択するか、次のように使用できます。より簡単なtop-left、top-rightなど。

最後に、borderStyleを使用して、破線、点線、または実線の境界線から選択できます。

React Nativeのシャドウに関しては、使い慣れたbox-shadowを使用することはありません。

代わりに、React Nativeには、iOSでのみ機能するスタイルがあります。

shadowOffset: { height: 3, width: 3 }, 
shadowColor: '#000000',
shadowOpacity: 0.5,
shadowRadius: 5

古いバージョンのAndroidには、ReactNativeを使用した優れた組み込みソリューションはありません。 elevationプロパティを設定できますが、これはカスタマイズできず、borderやbackground-colorなどの他のスタイルではうまく機能しません。

プラットフォーム間の違いの処理

前のセクションでは、プラットフォーム間の最初の大きな違いを確認しました。1つにはシャドウスタイルがありますが、もう1つにはありません。良い点は、上記の例では、Androidがサポートしていないスタイルを単に無視することです。動作しませんが、少なくともエラーは発生しません。これは、プラットフォームでサポートされていないすべてのスタイルに当てはまります。無視されます。

ただし、完璧でクリーンなスタイルであっても、プラットフォームごとに外観にかなりの違いが見られます。

プラットフォーム間でスタイルを同じに保つために、ReactNativeからPlatformコンポーネントをインポートしましょう。

import { View, StyleSheet, Platform } from 'react-native';

{/* ... */}
<View style={styles.container}></View>
{/* ... */}

const styles = StyleSheet.create({
  container: {
    height: Platform.OS === 'android' ? 100 : 20,
    backgroundColor: Platform.OS === 'ios' ? 'yellow' : 'blue',
    ...Platform.select({ ios: { width: 100 } })
  }
})

ここで、プラットフォーム固有のスタイルを設定する2つの異なる方法に注意してください。三項演算子を使用して、style小道具の後に1つの方法があります。

height: Platform.OS === 'ios' ? 100, 20

これはほとんどの状況でうまく機能しますが、1つのプラットフォームでスタイルを設定したくない場合はどうでしょうか。そこで登場するのが...Platform.select()です。これにより、1つのプラットフォームのみ、または両方でスタイルを指定できます。

...Platform.select({ ios { width: 100 }, android: { width: 75 } })

このコードは、iOSプラットフォームの場合はwidthの100を定義し、Androidプラットフォームの場合はwidthの75を定義します。

結論

この記事では、ReactNativeアプリケーションにスタイリングを適用する方法を紹介しました。

React Nativeでは、基本的にすべての要素がすべてのスタイルを使用できるWebとは異なり、スタイルはコンポーネントごとに異なることに気付くでしょう。

テキストコンポーネントのスタイルプロップの公式ReactNativeドキュメント。それはウェブ上で利用可能なプロパティの完全な幅を持っていません。また、 Button などの一部のコンポーネントには、styleプロップさえありません。

は、 <TouchableOpacity>や、もちろん<View>のようなコンポーネントを使用することもできます。これらのコンポーネントには、ほとんどのスタイリングプロップが用意されています。または、styled-componentsライブラリをインポートして、通常のCSSを使用することもできます。