react-native : navigate/load url via WebView

No Image, No Truth

use WebView component in reactnative.

var {   ....,   WebView, } = React; 

initial state give a default url

getInitialState: function() {  return {   url: '', // or default url  }; }, 

render with state url

<WebView ....your styles, properties   url={this.state.url} /> 

Navigate/load codes

load() {  this.setState({url:'http://google.com'}); } 

Full Sample Codes

import React, { Component } from 'react';
import {
Button,
Modal,
Image,
Keyboard,
NativeModules,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
WebView,
} from 'react-native';

const { WeChat } = NativeModules;

const SHARE_TO_WXTIMELINE = 0;
const SHARE_TO_WXSESSION = 1;
const webview = "webview";
const HOME_URL = "https://errong.win";

export default class App extends Component<{}> {

componentWillMount () {
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {this.keyboardDidHide()});
}

componentWillUnmount () {
this.keyboardDidHideListener.remove();
}

keyboardDidHide () {
console.log( this.urlText );
if (this.urlText != null) {
this.setState({url:this.urlText});
}
}

constructor(props) {
super(props);
this.state = {shareModalVisible : false, url : HOME_URL, urlBarVisible : true};
}

setShareModalVisible(visible) {
this.setState({shareModalVisible : visible});
}

onShare(scene) {
this.setShareModalVisible(false);
this.scene = scene;
if (this.shareMsg == null)
return;
if (WeChat.shareToTimeline)
WeChat.shareToTimeline(this.shareMsg, this.scene, null);
}

onWebViewMessage(event) {
console.warn(event.nativeEvent.data);
let msg;
try {
msg = JSON.parse(event.nativeEvent.data);
} catch (err) {
console.warn(err);
return;
}
if (msg.id == "ABSTRACT_FETCHED")
this.shareMsg = msg;
}

genAbstractJS() {
const genAbstractFunction = function() {
try {
let title;
let description;
let imageUrl;
let msg;
let n = document.querySelector('head title');
if (n)
title = n.innerText;
n = document.querySelector('p');
if (n)
description = n.innerText;
n = document.querySelector('p img');
if (n)
imageUrl = n.src;
if (description && imageUrl) {
msg = { 'id' : 'ABSTRACT_FETCHED',
'type' : 'textimage',
'description' : description,
'imageUrl': imageUrl
};
} else {
msg = { 'id' : 'ABSTRACT_FETCHED',
'type' : 'news',
'webpageUrl' : window.location.href
};
}
window.postMessage(JSON.stringify(msg), "*");
} catch (err) {
console.warn(err);
}
}
let js = "(" + String(genAbstractFunction) + ")();";
console.log(js);
return js;
}

onLoadEnd() {
this.refs[webview].injectJavaScript(this.genAbstractJS());
}

onUrlBar() {
}

renderUrlBar() {
if (this.state.urlBarVisible) {
return (
<TouchableOpacity style={styles.urlbar} onPress={() => {this.onUrlBar()}}>
<TextInput
style={styles.urlentry}
placeholder="search or input url"
onChangeText={(text) => {this.urlText = text}}
/>

)
} else {
return null;
}
}

render() {
return (

{this.renderUrlBar()}
<WebView
ref={webview}
style={{flex:1}}
javaScriptEnabled={true}
onMessage={(event) => {this.onWebViewMessage(event)}}
onLoadEnd={this.onLoadEnd.bind(this)}
source={{uri:this.state.url}}
/>
<Button
onPress={() => {this.setShareModalVisible(true)}}
title="Share"
color="#841584"
accessibilityLabel="Social Share"
/>



<TouchableOpacity style={styles.sharebutton} onPress={() => {this.onShare(SHARE_TO_WXTIMELINE)}}>
<Image
source={require('./res/img/wxtimeline.png')}
/>

<TouchableOpacity style={styles.sharebutton} onPress={() => {this.onShare(SHARE_TO_WXSESSION)}}>
<Image
source={require("./res/img/wxsession.png")}
/>





);
}
}

const styles = StyleSheet.create({
urlbar:{
backgroundColor:'#fafad2',
borderTopLeftRadius:4,
borderTopRightRadius:4,
borderBottomLeftRadius:4,
borderBottomRightRadius:4,
boderColor : '#C0C0C0',
borderWidth: 1
},
urlentry:{
height: 40
},
sgc:{
height:100,
width:300,
borderTopLeftRadius:10,
borderTopRightRadius:10,
borderBottomLeftRadius:10,
borderBottomRightRadius:10,
alignSelf: 'center',
top:400,
backgroundColor:'#fafad2'
},
sharegroup: {
flex:1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
},
sharebutton: {
width:64,
height:64
}
})