こんにちは！
クラウドソリューション開発部の大川です。
今回は、React NativeでHTMLコードを混ぜて使ってみた話を紹介したいと思います！
「えっ、ネイティブアプリにHTMLを混ぜるってどういうこと？」と思った方、実はこれがとても便利なんですよ・・・！
では早速、その体験談をお届けします！
はじめに
React Nativeで開発を進めていると、「このWebページ、アプリの一部としてそのまま使えたら便利なのに…」と思う瞬間がありませんか？
それができるのが、まさにreact-native-webviewなんです。このライブラリを使うことで、WebページやHTMLコンテンツをReact Nativeアプリにシームレスに組み込むことができます。
なぜHTMLを混ぜるのか？
まず、そもそも「なぜHTMLを混ぜるのか？」という疑問が浮かぶと思います。
理由はシンプルで、既存のWebコンテンツや動的なページを再利用したいからです！！
例えば、既に存在するマーケティングページやブログコンテンツを、アプリ内にそのまま表示することができれば、開発の手間を大幅に削減できます。
でも、「それならWebアプリでいいんじゃない？」と思うかもしれません。
しかし、ネイティブアプリの魅力は、カメラやGPS、通知など、デバイスの機能をフルに活用できる点にあります。
そこで、この二つの世界を融合させた「ハイブリッドアプローチ」が登場します。
WebViewにJavaScriptを埋め込むことで、Webページとネイティブのコンポーネントが相互にやり取りできるようになります。
例えば、ボタンをクリックしてネイティブのアクションをトリガーしたり、アプリからWebページにデータを送信するなどが可能になります！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import React, {useRef, useState} from 'react'; import {Alert, SafeAreaView, StyleSheet, Text, View} from 'react-native'; import {TextInput} from 'react-native-gesture-handler'; import WebView from 'react-native-webview'; const DebugScreen = () => { const [text, setText] = useState('React Native内のテキスト'); var htmlContent = ` <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <h1 style="color: blue;">これはHTMLです</h1> <p>Webの世界とネイティブの世界を融合しました！</p> <button onclick="alert('ボタンがクリックされました！')">HTMLでアラートを表示</button> <button onclick="sendReactNative()">React Nativeにデータを送信する</button> </body> </html> <style> html { background-color: #cffcfb; } button { margin: 10px; padding: 10px; background-color: #f0f0f0; border: 1px solid #000; border-radius: 5px; cursor: pointer; } </style> <script> function sendReactNative() { window.ReactNativeWebView.postMessage('WebviewからReact Nativeにデータを送信しました！'); } </script> `; const webview = useRef(null); const _handleMessage = event => { // ここでWebviewから送られてきた値をReact Native側で受け取る setText(event.nativeEvent.data); }; const ReactNativeComponent = () => { return ( <View style={{marginTop: 30}}> <Text>React Native内のコンポーネント</Text> <TextInput value={text} style={{borderWidth: 1, borderColor: 'black', backgroundColor: '#FFFFFF', padding: 10, margin: 10}} /> </View> ); }; return ( <SafeAreaView style={styles.webviewContainer}> <View style={styles.container}> <WebView source={{html: htmlContent}} originWhitelist={['*']} allowsInlineMediaPlayback={true} mediaPlaybackRequiresUserAction={false} scrollEnabled={false} scalesPageToFit={true} useWebKit={true} javaScriptCanOpenWindowsAutomatically ref={webview} onMessage={_handleMessage} overScrollMode={'never'} /> <ReactNativeComponent /> </View> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, webviewContainer: { flex: 0.5, }, }); export default DebugScreen; |
まとめ
React NativeにHTMLコードを混ぜることで、アプリ開発に新たな可能性が広がります。
既存のWeb資産を有効活用しながら、ネイティブアプリならではの機能を活かせる、このアプローチ、ぜひ皆さんも試してみてください！
終わりに
エコモットでは一緒にモノづくりをしていく仲間を募集中です！
弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！
