概要
ExpoアプリでWebViewを使用する際、以下のソースコードでは、画面に文字列を出力することができません。
import React, { Component } from 'react'; import { WebView } from 'react-native'; export default class Hoge extends Component { render() { return ( <WebView source={{ html:"<html><body>Hello<br/>World!</body></html>" }} /> ); } }
今回はExpoアプリで使うWebViewはreact-native-communityを使わなければ表示させることができない事について書きます。
原因
原因についてはReact Nativeの公式ドキュメントにデカデカと警告で表示されていますね。
Warning Please use the react-native-community/react-native-webview fork of this component instead. To reduce the surface area of React Native,
is going to be removed from the React Native core. For more information, please read The Slimmening proposal.
一応日本語で書きますと
「警告: 代わりに、このコンポーネントのreact-native-community/react-native-webviewを使用してください。 React Nativeのサイズを減らすために、WebViewはReact Nativeコアから削除されます。詳細については、スリム化の提案をご覧ください。」
一方、ExpoのWebViewのドキュメントをみてみましょう。
react-native-webview provides a WebView component that renders web content in a native view.
と記述があります。
自分がハマっていたのはまさにここでした。
私はExpo v33.0.0からReact Nativeを触り始めていたのですが、当時はReact Nativeの公式ドキュメントを参考に、WebViewをReact Nativeからimportして使っていました。
しかし、Expoにおいては、後にReact Nativeコアから独立して作れるreact-native-community/react-native-webviewを使わなければ、Expoアプリで表示できなかったのでした。
解決方法
Expoの公式ドキュメントにある通りです。
Installation
プロジェクトのルートで、react-native-community/react-native-webviewをインストールします。
$ expo install react-native-webview
コードの修正
コードの修正は、import文をreact-nativeからreact-native-communityに変更するだけです。
import React, { Component } from 'react';
- import { WebView } from 'react-native';
+ import { WebView } from 'react-native-webview';
export default class Hoge extends Component {
render() {
return (
<WebView
source={{
html:"<html><body>Hello<br/>World!</body></html>"
}}
/>
);
}
}
