「サンプルコードで作りながら学ぶReact Native実践入門」の感想・備忘録

【POD】サンプルコードで作りながら学ぶReact Native実践入門

posted with ヨメレバ

星直史インプレスR&D 2020年09月25日頃

楽天ブックス

Amazon

Kindle

点数
感想
ReactNative, Expoとは
Touchable
Push通知
Deep Link
1. 外部アプリへの遷移
  1. Linkingコンポーネントを使う場合
  2. WebBrowserコンポーネントを使う場合

点数

76点

感想

2020年の書籍なので使っているライブラリが古い、関数コンポーネントではなくクラスコンポーネントを使っている、など新しい情報に置き換えて読む必要はあったが、React Native全体を把握するには十分な内容であった。
第4章のPush通知とディープリンキングは解説がかなり省略されていて、パッケージのインストールについても全く触れられていないので書籍としては不親切であると感じた。

ReactNative, Expoとは

Cordova, Titanuim MobileはWebViewベース
Unity, Flutterは独自レンダラー
React Nativeはネイティブビューベース
Expoではコンパイルや配信がexpo.ioで行われる。
生成されたIPA/APKファイルはexpo.ioを参照するためのファイルとなっていて、初回実行時にexpo.ioからアプリがダウンロードされる。
2回目以降はexpo.io上の更新をチェックするため、Storeを経由しないOTAアップデートが可能となっている。

Touchable

ToucableOpacity: タップすると透明度が0.2になる
TouchableHighlight: underlayColorで背景色を指定できる以外はToucableOpacityと同じ
TOuchableWithoutFeedback: イベントを処理するだけでタップしても表示は変わらない
長押しはonLongPressでイベントハンドラを指定できる

Push通知

インストール

npx expo install expo-notifications

ExpoでPush通知を実装する手順

デバイスのトークンをWEBサーバに送信 (Expoを介してGoogleやAppleのPush通知用サーバからトークンを発行)
WEBサーバは受け取ったトークンを使用してExpoのPush通知APIを呼び出す (ExpoサーバはGoogle cloud messaging, AppleのAPNSにPush通知を送信する)
スマホアプリで通知の受信処理

トークン取得処理

トークンはアプリがインストールされる度に発行されるので、再インストールした場合はトークンが変わる。
ログイン処理などでトークンの取得を行うべき。

const getToken = async () => {
  // Push通知の許可を取得
  let { status } = await Notifications.getPermissionsAsync();
  if (status !== 'granted') {
    // 初回起動時は許可ダイアログを出してユーザからPush通知の許可させる
    status = await Notifications.requestPermissionsAsync();
  }
  if (status !== 'granted') {
    alert('Failed to get push token for push notification!');
    return;
  }
  // トークン取得
  const token = (await Notifications.getExpoPushTokenAsync({
    'projectId': "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  })).data;
  console.log(token);
}

外部通知送信処理（JavaScriptの場合）

fetch('https://exp.host/--/api/v2/push/send', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Accept-Encoding': 'gzip, deflate',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    to: 'ExponentPushToken[XXXXXXXXXXXXXXXXXXXXXXX]',
    title: 'タイトル',
    body: '内容',
    data: { msg: 'データ' },
  }),
})