React-native-webview
提供:Dev Guides
React Native-WebView
この章では、WebViewの使用方法を学習します。 Webページをモバイルアプリにインラインでレンダリングする場合に使用します。
WebViewを使用する
*HomeContainer* はコンテナコンポーネントになります。
App.js
import React, { Component } from 'react'
import WebViewExample from './web_view_example.js'
const App = () => {
return (
<WebViewExample/>
)
}
export default App;
*src/components/home* フォルダー内に *WebViewExample.js* という新しいファイルを作成します。
web_view_example.js
import React, { Component } from 'react'
import { View, WebView, StyleSheet }
from 'react-native'
const WebViewExample = () => {
return (
<View style = {styles.container}>
<WebView
source = {{ uri:
'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=finddevguides' }}
/>
</View>
)
}
export default WebViewExample;
const styles = StyleSheet.create({
container: {
height: 350,
}
})
上記のプログラムは、次の出力を生成します。