lucasferreira / react-native-webview-android

Simple React Native Android module to use Android's WebView inside your app
355 stars 158 forks source link

Please give an ES6 example #42

Closed eladcandroid closed 8 years ago

lucasferreira commented 8 years ago

OK, it's something like this:

import React, {
  Component,
  StyleSheet
} from 'react-native';

import WebViewAndroid from 'react-native-webview-android';

const SITE_URL = "https://www.google.com";

const styles = StyleSheet.create({
  containerWebView: {
    flex: 1,
  }
});

class WebViewAndroidExample extends Component {
  getInitialState() {
    return {
      url: SITE_URL,
      status: 'No Page Loaded',
      backButtonEnabled: false,
      forwardButtonEnabled: false,
      loading: true,
    };
  }
  goBack() {
    this.refs.webViewAndroidSample.goBack(); // you can use this callbacks to control webview
  }
  goForward() {
    this.refs.webViewAndroidSample.goForward();
  }
  reload() {
    this.refs.webViewAndroidSample.reload();
  }
  onNavigationStateChange(event) {
    console.log(event);

    this.setState({
      backButtonEnabled: event.canGoBack,
      forwardButtonEnabled: event.canGoForward,
      url: event.url,
      status: event.title,
      loading: event.loading
    });
  }
  render() {
    return (
      <WebViewAndroid
        ref="webViewAndroidSample"
        javaScriptEnabled={true}
        geolocationEnabled={false}
        builtInZoomControls={false}
        onNavigationStateChange={this.onNavigationStateChange}
        url={SITE_URL}
        style={styles.containerWebView} />
    );

    // other attributes: html(string), htmlCharset(string), baseUrl(string), injectedJavaScript(string), disableCookies(bool), disablePlugins(bool), userAgent(string)
  }
}
eladcandroid commented 8 years ago

This is what worked for me. Please add that to the docs:

import React, { Component } from 'react';
import {AppRegistry,StyleSheet} from 'react-native';
import WebViewAndroid from 'react-native-webview-android';

const SITE_URL = "https://www.google.com";

export default class WebViewAndroidExample extends Component {
    constructor(props) {
        super(props);

        this.state = {
            url: SITE_URL,
            status: 'No Page Loaded',
            backButtonEnabled: false,
            forwardButtonEnabled: false,
            loading: true,
        };
    };
    goBack() {
      this.refs.webViewAndroidSample.goBack(); // you can use this callbacks to control webview
    };
    goForward() {
      this.refs.webViewAndroidSample.goForward();
    };
    reload() {
      this.refs.webViewAndroidSample.reload();
    };
    onNavigationStateChange(event) {
      console.log(event);

      this.state = {
        backButtonEnabled: event.canGoBack,
        forwardButtonEnabled: event.canGoForward,
        url: event.url,
        status: event.title,
        loading: event.loading
      };
    };
   render() {
      return (
        <WebViewAndroid
          ref="webViewAndroidSample"
          javaScriptEnabled={true}
          geolocationEnabled={false}
          builtInZoomControls={false}
          onNavigationStateChange={this.onNavigationStateChange}
          url={SITE_URL}
          style={styles.containerWebView} />
          ); 
    }
}

const styles = StyleSheet.create({
  containerWebView: {
    flex: 1,
  }
});

AppRegistry.registerComponent('WebViewAndroidExample', () => WebViewAndroidExample);