筋トレ大学生によるアウトプット雑記

筋トレや読書のことをはじめとして、プログラミングその他日常生活における様々なことについて書いていきます。

Output Blog

主に筋トレ・プログラミングについて書きます

React Native入門② 基本コンポーネント編【2020】

スポンサーリンク

React Native入門② 基本コンポーネント編【2020】

React Nativeについて知りたいですか?
前回の記事では、環境構築方法をまとめました。
本記事では、

  • React Nativeにおける基本コンポーネント
  • 実際の表示

といったことを紹介します。
React Native入門したい方は必見です。
是非ご覧ください。

React Native基本コンポーネント

React Native入門② 基本コンポーネント編【2020】
それでは基本コンポーネントの解説を行っていきます。
それぞれわかりやすいように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サンプル

組み合わせ例


こんな感じのものを作ってみました。
動作内容としては、

  1. 入力受けつけ
  2. 入力内容を出力
  3. 入力文字数を出力
  4. 文字数文の画像を出力
  5. これらをスクロールビューに

という感じですね。

「useStateってなに?」
という方はとりあえずおまじないだと思っておいてください。
Reactをやっていた方は、普通にstateを考えてもらえれば大丈夫です。

次回予定

次回はstateとpropsを扱っていきたいと思います。
実際に「シンプルなToDoリスト」を作っていこうかなと考え中です。おたのしみに。

まとめ

Reactの基本コンポーネント編をまとめました。
是非ご利用ください。

スポンサーリンク

//タブメニュー