ReactNativeのWebView（Web）とアプリを連携する必要があったのでメモ。
忙しい人向け
- アプリからWeb => WebViewのinjectedJavaScriptにJSを渡して値をインジェクトしてWeb側でよしなにする
- Webからアプリ => window.ReactNativeWebView.postMessage("message")で送りonMessage()で受け取る
やりたいこと
例えば決済機能等の実装において、決済画面だけは決済サービス会社が提供するものを利用したいが、値はアプリ側で計算したものをデフォルト値として渡したいケースなど。
以下のような仕様。
最近の決済APIはカード情報非保持・非通過とするためWeb画面でカード番号を入れさせるものが多い。さらに言えばexpoでEjectしないで利用できるコンポーネントもない。
Web側
Web側は普通のHTMLだとまだ簡単なのですがReactを使うことが多いのでReactを使ってみます。
準備
場所作って必要なモジュールをインストール。
create-react-app web-app
cd web-app
npm install --save bootstrap reactstrap formik yup
実装
続いて実装。
index.js
bootstrap cssの読み込みとServiceWorkerを削除している（キャッシュが効いちゃうので）。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
App.jsに一旦すべて実装。
- priceというidのinputを用意
- cardというidのinputを用意
- priceにinjectedJavaScriptから値を設定
ということを想定。私いつもFormikつかうので使ってます。
App.js
import React from 'react';
import { Form, FormGroup, Label, Input, Button, FormFeedback } from 'reactstrap';
import { Formik } from 'formik';
import * as Yup from 'yup';
class App extends React.Component {
handlePayment = async (values) => {
//1秒休む
await this.sleep(1000);
//終了したらアプリ側にメッセージを送る
window.ReactNativeWebView.postMessage(values.price + "円の決済が完了しました。");
}
//おやすみ補助関数
sleep = (msec) => {
return new Promise((resolve) => {
setTimeout(() => {
return resolve();
}, msec)
})
}
render() {
return (
<div className="container">
<h3 className="my-4 text-center">Payment（ここはWeb）</h3>
<div className="col-10 mx-auto">
<Formik
initialValues={{ price: 0, card: '1111-2222-3333-4444' }}
onSubmit={(values) => this.handlePayment(values)}
validationSchema={Yup.object().shape({
price: Yup.number().min(1).max(1000),
card: Yup.string().required(),
})}
>
{
({ handleSubmit, handleChange, handleBlur, values, errors, touched, setFieldValue }) => (
<Form>
<FormGroup>
<Label>金額</Label>
<Input
type="text"
name="price"
id="price" //idで強引に値をセット
value={values.price}
onChange={handleChange}
onBlur={handleBlur}
invalid={Boolean(touched.price && errors.price)}
disabled
/>
<FormFeedback>
{errors.price}
</FormFeedback>
</FormGroup>
<FormGroup>
<Label>カード番号</Label>
<Input
type="text"
name="card"
id="card"
value={values.card}
onChange={handleChange}
onBlur={handleBlur}
invalid={Boolean(touched.card && errors.card)}
/>
<FormFeedback>
{errors.card}
</FormFeedback>
</FormGroup>
<Button type="button" onClick={async () => {
const price = document.getElementById("price");
//Formik使ってるので値を明示的にセットしてやる（完了するうちにValidationが走らないようawait）
await setFieldValue("price", price.value);
handleSubmit();
}}>購入</Button>
</Form>
)
}
</Formik>
</div>
</div>
);
}
}
export default App;
とりあえず完成。window.ReactNativeWebView.postMessage()なんていう関数は標準のブラウザにはないのでchrome等でデバッグするとエラー出ますが無視します。
アプリ側
次にアプリ側。
場所の準備と必要コンポーネントをインストール。WebViewは普通にインストールするとexpoに怒られるのでexpo installコマンドで適切なバージョンのものをインストール。
expo init app-web-integration
cd app-web-integration
expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens
expo install react-navigation-stack react-navigation-tabs react-navigation-drawer
expo install react-native-webview
まずApp.js。基本的にStackNavigatorを設定しているだけ。
Home.jsとPayment.jsを利用しています。
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Card, Input, Button } from 'react-native-elements';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './Home';
import Payment from './Payment';
//stack navigator
const HomeStack = createStackNavigator(
{
Home: {
screen: Home,
},
Payment: {
screen: Payment,
}
}
);
const AppContainer = createAppContainer(HomeStack);
class App extends React.Component {
render() {
return (
<AppContainer />
);
}
}
export default App;
Home.js
ボタンを配置してPayment.jsに移動します。またその時金額をパラメーターとして渡しています。
Home.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Card, Input, Button } from 'react-native-elements';
class Home extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', marginTop: 50 }}>
<Text style={{ fontSize: 24 }}>Home（ここはアプリ）</Text>
<Button
title="100円コースを買う"
style={{ width: '80%', marginTop: 20 }}
onPress={() => this.props.navigation.navigate("Payment", { price: 100 })}
/>
<Button
title="200円コースを買う"
style={{ width: '80%', marginTop: 20 }}
onPress={() => this.props.navigation.navigate("Payment", { price: 200 })}
/>
</View>
);
}
}
export default Home;
Payment.js
このコンポーネントはWebViewになります。WebViewの、
- injectedJavaScriptにWeb側に渡す値を設定
- onMessageに戻りの処理を書く
Payment.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Card, Input, Button } from 'react-native-elements';
import { WebView } from 'react-native-webview';
class Payment extends React.Component {
state = {
js: '',
}
componentDidMount = async () => {
//前のページからパラメータを受け取る（なければ0）
const price = await this.props.navigation.state.params.price ? this.props.navigation.state.params.price : 0;
//priceを設定するスクリプトを動的に生成
const js = `
const price = document.getElementById("price");
price.value = ${price}
`;
//stateを通じて渡す
this.setState({ js: js });
}
//Web側からのpostMessageに対応
onMessage = (event) => {
const message = event.nativeEvent.data;
this.props.navigation.navigate("Home");
alert(message);
}
render() {
//js内の変数が処理されないうちにWebViewがレンダリングするのを防ぐ
if (this.state.js === '') {
return <Text>Loading...</Text>
}
//WebViewをレンダリング
return (
<WebView
source={{ uri: 'http://localhost:3000/' }}
injectedJavaScript={this.state.js}
onMessage={this.onMessage}
/>
)
}
}
export default Payment;
かなり端折ってるけるけどとりあえず。