React Native入門② 基本コンポーネント編【2020】
スポンサーリンク
前：React Native入門① 環境構築編【2020最新版】 - 筋トレ大学生によるアウトプット雑記
次：React Native入門③ シンプルなToDoリストの作成【2020】 - 筋トレ大学生によるアウトプット雑記
次：React Native入門③ シンプルなToDoリストの作成【2020】 - 筋トレ大学生によるアウトプット雑記
React Nativeについて知りたいですか？
前回の記事では、環境構築方法をまとめました。
本記事では、
- React Nativeにおける基本コンポーネント
- 実際の表示
といったことを紹介します。
React Native入門したい方は必見です。
是非ご覧ください。
React Native基本コンポーネント
それでは基本コンポーネントの解説を行っていきます。
それぞれわかりやすいようにExpoの実行結果を貼り付けていきます。
React Nativeの日本語記事は、古いものが多くなっています。
この記事は2020年5月4日に書いており、最新の情報を載せていますのでご安心ください。
View
まずは基本となるViewからですが、こちらは意味を持たないので実行結果はありません。
意味を持たないとはどういうことかというと、HTMLにおける<div>と同じ感じですね。
基本的にViewはスタイルを適用してレイアウトを整える役割を果たします。
Text
Textコンポーネントは、その名の通りTextを表示します。
書き方は、HTMLにおける<p>を想像してもらえると容易ですね。
下記はサンプルコードです。
おなじみHello,Worldを表示してます。
なお、Viewに対してスタイルを適用しました。このようにViewは使っていきます。
この辺は簡単ですね。
Button
次はButtonです。ボタンです。
下記のサンプルコードをご覧ください。
Web、Androidではボタンが表示されます。
iOSでは、aタグみたいな青文字クリック要素が表示されます。
Image
画像を表示するコンポーネントです。
こちらはオブジェクトをsourceに渡す必要がある点と、大きさを指定しないと画像が表示されない点に注意してください。
上記のように、sourceに対して直接widthとheightをオブジェクトで渡しても、styleとして適用しても大丈夫です。
ScrollView
スクロールビューを表示するコンポーネントです。
サンプルコードを公式から持ってきました。笑
このコンポーネントは最初は使いどころがないと思いますが、ゆくゆく使う場面が来ます！
TextInput
ユーザーからの入力を受け付けるコンポーネントです。
FlatList & SectionList
FlatListはただのリストで、
SectionListはリストヘッダーのあるリストです。
FlatListサンプル
SectionListサンプル
組み合わせ例
こんな感じのものを作ってみました。
動作内容としては、
- 入力受けつけ
- 入力内容を出力
- 入力文字数を出力
- 文字数文の画像を出力
- これらをスクロールビューに
という感じですね。
「useStateってなに？」
という方はとりあえずおまじないだと思っておいてください。
Reactをやっていた方は、普通にstateを考えてもらえれば大丈夫です。
次回予定
次回はstateとpropsを扱っていきたいと思います。実際に「シンプルなToDoリスト」を作っていこうかなと考え中です。おたのしみに。
まとめ
Reactの基本コンポーネント編をまとめました。是非ご利用ください。
