開発者ドキュメント

Flexboxを使用してReactNativeでランディングページを構築する

React Native アプリのスタイリングは、そのスタイリングの原動力であるFlexboxレイアウトモジュールに慣れていない場合は非常に苦痛になる可能性があります。 JavaScriptでスタイルを設定することはできますが、Flexboxレイアウトを理解して実装することは、ReactNativeを使用したUI開発にとって絶対に不可欠です。 このウォークスルーでは、Flexboxを使用してランディングページを作成します。

ネタバレ注意、最後まで Flexbox を実装しません!

Flexboxについて

あなたはおそらくCSSを使用したflexboxレイアウトに精通しているでしょう。ReactNativeのFlexboxの実装はほとんど同じです。 Flexboxは、ユーザーインターフェイス、特にモバイルインターフェイスの構築に最適化された強力で効率的なスタイリングツールです。 コンポーネントのスタイルでflexプロパティを使用することにより、使用可能なスペースに基づいて動的に拡大および縮小できます。

React Nativeflexプロパティは、CSSの場合とは少し異なり、代わりにCSSfrユニットのように機能します。ここで、提供される数値は、取られたスペース。 したがって、React Nativeでは、flexは単純な数値を期待します。

flexプロパティがCSSflex省略形プロパティと異なることを除けば、React Nativeのフレックスボックスの実装とCSS実装のその他の違いは、flex-directionのデフォルトがReactNativeのの値。

やってみましょう

このサンプルプロジェクトでは、1987年以来ケイジャンベーコンレシピの架空の情報源である AlligatorChef🐊のランディングページを作成します。

終了したときのプロジェクトの外観は次のとおりです。

🐥ReactNative を初めて使用する場合は、チュートリアルReactNativeとExpoの開始がこのチュートリアルの準備に最適な方法です。

🚀ReactNativeクイックスタート

ターミナルで次のコマンドを実行して、新しい React Native プロジェクトを作成し、新しいディレクトリに移動してプロジェクトを開始し、iOSの場合はiと入力します。

$ create-react-native-app AlligatorChef
$ cd AlligatorChef
$ npm start
$ i

ここには何がありますか?

StyleSheet.createの呼び出しでflexpopertyを使用して、 Create React NativeAppで取得した初期コードでFlexboxが使用されている例をすでに確認できます。 App.jsファイルを見てください。 FlexboxがReactNativeのスタイリングの鍵であるというヒントを私たちに与えているようです。

App.js
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

これは、コンテナが画面全体に収まるように伸びる必要があることを示しています。

次のステップ

デフォルトのプロジェクトができたので、いくつか変更を加えましょう。

まず、ヘッダーに2つのText要素を追加しましょう。

交換:

<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>

と:

<Text style={styles.h1}>AlligatorChef</Text>
<Text style={styles.h2}>Providing cajun bacon recipes since 1987.</Text>

見ることはあまりありませんよね? StyleSheetにいくつかのスタイルを追加して、スパイスを効かせましょう。 1つの大きな急降下で、デフォルトのコンテナを含め、所有しているすべてのものを次のスタイルに置き換えます。 これで、StyleSheetは次のようになります。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#000',
    alignItems: 'center',
    width: '100%',
  },
  h1: {
    color: '#008F68',
    fontSize: 40,
  },
  h2: {
    color: '#FAE042',
    fontSize: 18,
    marginTop: 8,
  },
});

変更した内容について少し話しましょう。 色とフォントに気づいたかもしれませんが、アプリが少しスペーシーに見える理由を説明するきらめく例が1つあります。

justifyContentcenterからspace-betweenに変更しました。 centerに戻すと、すべてが幸せになり、再び中央に配置されますが、追加するものはまだまだたくさんあります。 justifyContent: 'space-between'を使用すると、各アイテムが画面の上部と下部の間に均等に配置されます。 これが、h1が上部に接着され、h2が下部に接着されている理由です。

画像とボタン

これをすぐに修正するのではなく、もう少し混乱を引き起こしたいと思います。 先に進み、ImageButtonを追加しましょう。

styles宣言を維持したまま、現在のコードを以下のコードに置き換えます。

import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import Logo from './assets/chef.png';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.h1}>AlligatorChef</Text>
        <Text style={styles.h2}>Providing cajun bacon recipes since 1987.</Text>
        <Image
          source={Logo}
          style={styles.image}
        />
        <Button
          title="LET'S START"
          style={styles.button}
          onPress={() => this.onPress()}
          color="#fff"
        />
      </View>
    );
  }
}

// ...

次に、rootフォルダーに、assetsというフォルダーを作成します。 通常、プロジェクト内のすべてのコンポーネントに簡単にアクセスできるように、画像をassetsフォルダーに保存します。 AlligatorChef🐊ロゴとして使用する画像ファイルをこのフォルダーに追加します。

React Native は画像に少し気まぐれで、いくつかの問題が発生する可能性があります。 このユースケースでは、png画像を使用していることを確認してください。

ウーフ。 私たちが望んでいたものではありませんよね? 🌵

スタイリング

すべての要素が揃ったので、少し悲しそうに見えます。 それを修正しましょう。

ReactNativeの画像にはサイズが必要です

React Nativeのベストプラクティスとして、画像に常にサイズを設定する必要があります。 画像が表示されないという問題が発生した場合は、画像にサイズを割り当てていることを確認してください。 ご覧のとおり、すでにstyleプロップで画像にクラスを指定しているので、そのクラスにいくつかの属性を指定しましょう。 StyleSheetに以下の行を追加して、その大きなole’gatorを飼いならします。

image: {
  width: 300,
  height: 260,
  justifyContent: 'center',
},

彼は今、はるかに扱いやすいように見えます!

私のボタンはボタンのようには見えません!

ReactNativeボタンもかなりうるさいです。 React Nativeには、<Button>の間にテキストを入れて開閉するのではなく、titleプロップが必要です。 上記の提供されたコードを見ると、いくつかのエラーを回避するためにそれが含まれていることがわかります。

React Nativeでは、Buttonに小道具を送る必要がありますが、ボタンを含むViewのスタイルを作成する必要もあります。 先に進んで、コンテナとクラスをStyleSheetに追加しましょう。

まず、buttonContainerのクラスを持つViewをコードに追加します。

<View style={styles.buttonContainer}>
  <Button
    title="LET'S START"
    style={styles.button}
    onPress={() => this.onPress()}
    color="#fff"
  />
</View>

次に、スタイルシートに以下を追加します。

buttonContainer: {
  backgroundColor: '#008F68',
  borderRadius: 5,
  padding: 8,
  margin: 8,
},

それはボタンのように見えます!

Flexboxの準備はできていますか?!

さて、魔法の Flexbox を使用して、このページの残りの部分を制御できるようにしましょう。 準備はいいですか? 🏀

最初に、元のコンテナ内に3つのcontainerを追加します。 最初のコードを次のコードに置き換えると、topContainermiddleContainer、およびbottomContainerといういくつかの新しいクラスに気付くでしょう。

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  ProgressViewIOS
} from "react-native";
import Logo from "./assets/chef.png";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.topContainer}>
          <Text style={styles.h1}>AlligatorChef</Text>
          <Text style={styles.h2}>
            Providing cajun bacon recipes since 1987.
          </Text>
        </View>
        <View style={styles.middleContainer}>
          <Image source={Logo} style={styles.image} />
        </View>
        <ProgressViewIOS number={1} />
        <View style={styles.bottomContainer}>
          <View style={styles.buttonContainer}>
            <Button
              title="LET'S START"
              style={styles.button}
              onPress={() => this.onPress()}
              color="#fff"
            />
          </View>
        </View>
      </View>
    );
  }
}

これらのクラスを現在のStyleSheetに追加して、魔法を見てみましょう。

topContainer: {
  flex: 2,
  justifyContent: 'center',
  alignItems: 'center',
},
middleContainer: {
  flex: 3,
  justifyContent: 'flex-start',
  alignItems: 'center',
},
bottomContainer: {
  justifyContent: 'flex-end',
  width: '90%',
  margin: 20,
  padding: 10,
},

✨MAGIC!✨

Flexboxが1日をどのように節約したかについて話し合いましょう

flex: 2topContainerに割り当て、フレックスグロー値を2にして、元のcontainerの2/5を使用します。 また、中央のすべてを揃えて正当化するように指示しました。 ビジュアルデモについては、以下のスクリーンショットをご覧ください。

flex: 3middleContainerに割り当てて、元のcontainerの残りの3/5を取得しました。 justifyContent: 'center'を使用する代わりに、justifyContent: 'flex-start'を使用しました。 これが、AlligatorChef🐊画像がmiddleContainerの上部に配置される理由です。

最後に、Buttonが占めるページの量は関係ないため、flexBasisを指定する必要はありません。 ボタンはページの下部にあるだけなので、bottomContainerjustifyContent: 'flex-end'を割り当てます。

それだけです🐿

これは単なる一般的な紹介ですが、Flexboxレイアウトモジュールには、ReactNativeだけでなく一般的なWeb開発にも提供できるものがたくさんあります。

👉常にイースターエッグを探すことを忘れないでください。 🤓

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