Flexboxを使用してReactNativeでランディングページを構築する
React Native アプリのスタイリングは、そのスタイリングの原動力であるFlexboxレイアウトモジュールに慣れていない場合は非常に苦痛になる可能性があります。 JavaScriptでスタイルを設定することはできますが、Flexboxレイアウトを理解して実装することは、ReactNativeを使用したUI開発にとって絶対に不可欠です。 このウォークスルーでは、Flexboxを使用してランディングページを作成します。
ネタバレ注意、最後まで Flexbox を実装しません!
Flexboxについて
あなたはおそらくCSSを使用したflexboxレイアウトに精通しているでしょう。ReactNativeのFlexboxの実装はほとんど同じです。 Flexboxは、ユーザーインターフェイス、特にモバイルインターフェイスの構築に最適化された強力で効率的なスタイリングツールです。 コンポーネントのスタイルでflex
プロパティを使用することにより、使用可能なスペースに基づいて動的に拡大および縮小できます。
React Nativeのflexプロパティは、CSSの場合とは少し異なり、代わりにCSSのfrユニットのように機能します。ここで、提供される数値は、取られたスペース。 したがって、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
の呼び出しでflex
popertyを使用して、 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つあります。
justifyContentをcenter
からspace-between
に変更しました。 center
に戻すと、すべてが幸せになり、再び中央に配置されますが、追加するものはまだまだたくさんあります。 justifyContent: 'space-between'
を使用すると、各アイテムが画面の上部と下部の間に均等に配置されます。 これが、h1
が上部に接着され、h2
が下部に接着されている理由です。
画像とボタン
これをすぐに修正するのではなく、もう少し混乱を引き起こしたいと思います。 先に進み、Image
とButton
を追加しましょう。
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
を追加します。 最初のコードを次のコードに置き換えると、topContainer
、middleContainer
、および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: 2
をtopContainer
に割り当て、フレックスグロー値を2にして、元のcontainer
の2/5を使用します。 また、中央のすべてを揃えて正当化するように指示しました。 ビジュアルデモについては、以下のスクリーンショットをご覧ください。
flex: 3
をmiddleContainer
に割り当てて、元のcontainer
の残りの3/5を取得しました。 justifyContent: 'center'
を使用する代わりに、justifyContent: 'flex-start'
を使用しました。 これが、AlligatorChef🐊画像がmiddleContainer
の上部に配置される理由です。
最後に、Button
が占めるページの量は関係ないため、flexBasisを指定する必要はありません。 ボタンはページの下部にあるだけなので、bottomContainer
justifyContent: 'flex-end'
を割り当てます。
それだけです🐿
これは単なる一般的な紹介ですが、Flexboxレイアウトモジュールには、ReactNativeだけでなく一般的なWeb開発にも提供できるものがたくさんあります。
👉常にイースターエッグを探すことを忘れないでください。 🤓