前置き

react nativeでフル画面のwebviewをどうやって閉じるのか迷ったので自分用のメモとして残しておく。

環境

node.jsのバージョン

node -v
v10.5.0

react nativeのバージョン

react-native-cli: 2.0.1
react-native: 0.46.4

react nativeのバージョンが古いね・・・
そのうちバージョン上げる

コード

webviewの起動

import React, {
  Component
} from 'react';

import {
  Text,
  StyleSheet,
  TouchableOpacity,
  Modal,
  View,
  WebView
} from 'react-native';

class Webview extends Component {

  state = {
    modalVisible: true,
  }

  show() {
    this.setState({ modalVisible: true })
  }

  hide() {
    this.setState({ modalVisible: false })
  }
  

  render() {
    const styles = StyleSheet.create({
      container: {
        flex: 1
      },
      area: {
        flex: 1,
        width: "100%",
        backgroundColor: '#f8f8ff',
        zIndex: 3000,
        position: "relative"
      },
      btnStyle: {
        width: "20%",
        height: 60,
        alignSelf: "flex-end"
      },
      closeStyle: {
        width: "100%",
        position: "absolute",
        top: 30,
        textAlign: "center" 
      }
    })
   
    return (
      <Modal
        visible={this.state.modalVisible}
        onRequestClose={() => this.hide()}
      >
        <View style={styles.container}>
          <View style={styles.area}>
            <TouchableOpacity onPress={this.hide.bind(this)} style={styles.btnStyle}>
              <Text style={styles.closeStyle}>閉じる</Text>
            </TouchableOpacity>
            <WebView source={{ uri: "https://google.com" }} />
          </View>
        </View>
      </Modal>
      
    )
  }
}

export default Webview;

webview(google)がフル画面で表示され、ページのトップに閉じるボタンが配置されている。

まとめ

modalで開くことに気づくまで時間がかかった。
もう少しreact nativeになれたい。