点数
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: 'データ' },
}),
})Deep Link
別のアプリの特定の画面へ遷移させるための仕組みをDeep Link(Universal Link)という。
ex) tel:09000000000で電話アプリが立ち上がる
myapp:のような独自URLスキームを設定することで、別アプリから自分のアプリに遷移させることが可能になる。
外部アプリへの遷移
Linkingコンポーネントを使う場合
<Button title="tel:0312345678" onPress={()=>Linking.openURL("tel:0312345678")}/>
WebBrowserコンポーネントを使う場合
npx expo install expo-web-browser
import * as WebBrowser from 'expo-web-browser';
でインポートしてWebBrowser.openBrowserAsync('https://toyota.jp/')}/>
androidの場合はブラウザアプリが立ち上がるのではなく、ChromeCustomTabs(アプリケーション内でカスタマイズされたChromeのタブ)で開かれる。