Android/iOSクロス開発フレームワーク React Native入門

概 要

スマートフォンアプリ開発において「AndroidとiPhone(iOS)を別々に開発しなければならない」という問題点は大きな悩みです。その悩みを解決するのが、一度ソースを書けばどちらのアプリも作れる「React Native」です。本書は、React Nativeで効率的にスマホアプリを開発するためのノウハウを解説した入門書です。基本的なUI関係のコンポーネント、グラフィックの描画、データアクセスなど、開発に必要な技術をひととおり解説します。

著者 掌田津耶乃
価格 本体3000円(税別)
ISBN 978-4-7980-5605-0
発売日 2018/10/20
判型 B5変
ページ数 386
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

Chapter 1 インストールとセットアップ

1-1 React Nativeを準備する

スマートフォン開発の問題とは?

React Nativeとは?

React Native開発に必要なもの

Node.jsをインストールする

Create React Native Appを使う

React Native Packagerの実行

ExpoまたはExpo Clientを利用する

React Native CLIを使う

1-2 Android Studioの準備

Android Studioについて

Android Studioのセットアップ

SDK Managerを利用する

AVD Managerについて

「android」「ios」フォルダについて

1-3 Expoによる開発

React NativeとExpo

XDEを使う

XDEを起動する

Expoプロジェクトを作る

アプリを公開する

Expo Snackを使おう!

プロジェクトの実行

プロジェクトを保存する

プロジェクトのエクスポート

まずは、Expo Snackで!

Chapter 2 React Nativeの基本をマスターする

2-1 アプリケーションの基本構成

React Nativeアプリの構成

React Nativeアプリの基本構成

アプリケーションの基本スクリプト

Appクラスについて

ViewとText

変数を表示する

2-2 コンポーネントの基本機能

styleを設定する

StyleSheetクラスの利用

StyleSheet.createメソッド

コンストラクタについて

コンポーネントのサイズ設定

2-3 基本的UIコンポーネント

Buttonの利用

onPressイベントについて

ステート(State)について

テキストを入力する「TextInput」

ネイティブプロパティ操作

2-3 コンポーネントの作成

コンポーネントは自作できる!

Welcomeコンポーネントを使う

属性を用意する

コンストラクタとprops

イメージ表示コンポーネント

Chapter 3 UIコンポーネント

3-1 入力の基本

Switchコンポーネント

Sliderコンポーネント

Pickerコンポーネント

onChangeValueとvalue

3-2 ListViewによるリスト表示

リスト表示とListView

ListViewを利用する

ListViewの処理を整理する

項目のタッチ処理

複雑なデータを表示する

ListViewは、いかに項目を作成するか

3-3 FlatListとSectionList

FlatList

より複雑な表示を作る

SectionListについて

3-4 React Native Elementsのコンポーネント

React Native Elementsについて

CheckBoxコンポーネント

ButtonGroupコンポーネント

ButtonGroupを利用する

Ratingコンポーネント

ListおよびListItemコンポーネント

Formコンポーネント

Iconコンポーネント

Chapter 4 レイアウトを考える

4-1 基本画面を構成するもの

スマートフォンの画面構成

ステータスバーとヘッダー

ステータスバーとヘッダーを表示する

フレックスボックスについて

flex属性の働き

flex:0と1の働き

4-2 レイアウトのためのコンポーネント

スクロール表示について

Tileによるタイル表示

Tileにコンテンツを追加する

WebViewについて

4-3 モーダル

モーダルとは?

よりモーダルらしく

4-4 ナビゲーション

React Navigationについて

createStackNavigatorの利用

ナビゲーションを利用する

タブナビゲーション

Chapter 5プラットフォーム固有の機能

5-1 Androidの独自UIコンポーネント

DrawerLayoutAndroidコンポーネント

ToolbarAndroidコンポーネント

ToolbarAndroidを利用する

アイコンの表示について

ViewPagerAndroidコンポーネント

ページの移動と遷移イベント

5-2 iOSの独自UIコンポーネント

PickerIOSコンポーネント

DatePickerIOSコンポーネント

TabBarIOSコンポーネント

SegmentedControlIOSコンポーネント

ActionSheetIOSコンポーネント

Chapter 6 グラフィックの描画

6-1 ARTによる図形描画

ARTとは?

ARTの基本

ARTで図形を描く

d属性について

絶対座標と相対座標

関数でShapeを作る

ArcToによる円弧

を作る

Rectも作成してみる

CurveToによる曲線描画

Textによるテキスト描画

6-2 グラフィック描画を支援する機能

Groupについて

Transformについて

LinearGradientについて

RadialGradientについて

Pathクラスを使った描画

ClippingRectangleによるクリッピング

6-3 Canvasを利用する

Canvasについて

Canvasクラスを作成する

Canvasクラスを利用する

図形描画の設定

四角形の描画

パスを利用する

座標変換

グラディエーションの利用

テキストの描画

Chapter 7 タイマー、アニメーション、データアクセス

7-1 タイマーの利用

Timerによるアニメーション

ミックスインについて

TimerMixinを利用する

タッチ時の反応について

7-2 アニメーション

アニメーションについて

テキストを変化させる

連続処理と繰り返し

繰り返しと連続実行の利用例

Animated.Viewを利用する

オリジナルコンポーネントを動かす

Synthetic Touch Eventsについて

7-3 データアクセス

ネットワークアクセス

テキストデータを取得する

JSONデータを取得する

FileSystemとファイルアクセス

AsyncStorageデータベース

Chapter 8 サンプルアプリの開発

8-1 Yahoo!ニュースチェッカー

Yahoo!ニュースのRSSを使おう

スクリプトを作成する

スクリプトのポイントをチェック

Homeクラスについて

Genreクラスについて

WebViewでWebページを表示する

8-2 QRブラウザ

QRコードをスキャンしてWeb表示

スクリプトを作成する

パーミッションを得る

QRコードをスキャンする

コンポーネントをON/OFFするには?

8-3 「I am here!」アプリの作成

今いる場所をメールで送信!

Google Cloud Platformについて

Google Apps Scriptプロジェクトの作成

Google Maps Static APIを有効にする

Webアプリケーションで公開する

アプリのスクリプトを作成する

パーミッションの設定

名前の保管

位置情報の取得

コンタクト情報の取得

Webへのアクセス

今後の課題

PR

秀和システム