React Native の WebView でローカルファイルをロードしてJavascriptを実行する
React Native の WebView でローカルファイルをロードしてJavascriptを実行する:
ReactNativeで開発していてWebViewを使ってローカルファイルをロードしてJavascriptを実行する必要があって日本語の情報なくてちょっと困ったので備忘録として残しておく
だれかの参考になれば幸いです
※ iOSのみ
ロードするhtmlを index.html とする
index.htmlの中身
ファイル配置
ReactNativeで開発していてWebViewを使ってローカルファイルをロードしてJavascriptを実行する必要があって日本語の情報なくてちょっと困ったので備忘録として残しておく
だれかの参考になれば幸いです
※ iOSのみ
概要
- ロードしたいhtmlやそのhtmlが参照しているcssなどはios/external/ 以下に配置する
- XCodeにexternalを追加する(ドラッグ&ドロップ)
- WebViewからはsource={{uri: './index.html'}}でアクセスする
例
ロードするhtmlを index.html とするindex.htmlの中身
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div>hoge</div>
<div class="test"></div>
</body>
</html>
ReactNativeRootフォルダ
└ios
└external
├index.html
├main.css
└main.js
render() {
const jsCode = `var testElement = document.getElementByClassName('test')
var appendElement = document.createElement('div')
appendElement.textContent = 'hugu'
testElement.appendChild(appendElement)
`
return <View>
<WebView
source={{uri: './index.html'}}
injectedJavascript={jsCode}
/>
</View>
}
コメント
コメントを投稿