開発者ドキュメント

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

getdocs

序章

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

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

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

前提条件

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

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]

モバイルバージョンを終了