ReactNative: WebView を使用する

画面いっぱいに WebView を広げたいので、Dimensions.get('screen') を使用して画面のサイズを計測してみたりします。

以下は https の Web ページを表示するサンプルです。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  WebView,
  Dimensions,
} from 'react-native';

const deviceWidth = Dimensions.get('screen').width;
const deviceHeight = Dimensions.get('screen').height;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  video: {
    flex: 1,
    width: deviceWidth,
    height: deviceHeight,
  }
});

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <WebView
          source={{uri: 'https://facebook.com'}}
          style={styles.video}
          scalesPageToFit={true}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('ProjectName', () => App);

Android では問題ないのですが iOS では HTTPS でない HTTP なページを表示する場合、セキュリティ都合で一工夫が必要です。

/ios/ProjectName/info.plist にて以下のように、URL のホワイトリストを指定する必要があります。

	<dict>
		<key>NSExceptionDomains</key>
		<dict>
			<key>feb19.jp</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
			<key>localhost</key>
			<dict>
				<key>NSExceptionAllowsInsecureHTTPLoads</key>
				<true/>
			</dict>
		</dict>
	</dict>

保存したあと、一度 ReactNative のプロセスを終了し、react-native run-ios で再度ビルドし直す必要があります。

この作業は Swift / Xcode で開発する場合でも必要な工程なので ReactNative だから余計な作業が〜ということはありません。