'use strict';
+
+
var React
= require('react-native');
+
var StyleSheet
= require('StyleSheet');
+
var {
+ ActivityIndicatorIOS
,
+ StyleSheet
,
+ Text
,
+ TextInput
,
+ TouchableOpacity
,
+ View
,
+ WebView
+
} = React
;
+
+
var HEADER
= '#3b5998';
+
var BGWASH
= 'rgba(255,255,255,0.8)';
+
var DISABLED_WASH
= 'rgba(255,255,255,0.25)';
+
+
var TEXT_INPUT_REF
= 'urlInput';
+
var WEBVIEW_REF
= 'webview';
+
var DEFAULT_URL
= 'https://m.facebook.com';
+
+
var WebViewExample
= React
.createClass({
+
+ getInitialState
: function() {
+
return {
+ url
: DEFAULT_URL
,
+ status
: 'No Page Loaded',
+ backButtonEnabled
: false,
+ forwardButtonEnabled
: false,
+ loading
: true,
+
};
+
},
+
+ inputText
: '',
+
+ handleTextInputChange
: function(event
) {
+
this.inputText
= event
.nativeEvent
.text
;
+
},
+
+ render
: function() {
+
this.inputText
= this.state
.url
;
+
+
return (
+ <View style
={[styles
.container
]}>
+ <View style
={[styles
.addressBarRow
]}>
+ <TouchableOpacity onPress
={this.goBack
}>
+ <View style
={this.state
.backButtonEnabled
? styles
.navButton
: styles
.disabledButton
}>
+ <Text
>
+
{'<'}
+ <
/Text
>
+ <
/View
>
+ <
/TouchableOpacity
>
+ <TouchableOpacity onPress
={this.goForward
}>
+ <View style
={this.state
.forwardButtonEnabled
? styles
.navButton
: styles
.disabledButton
}>
+ <Text
>
+
{'>'}
+ <
/Text
>
+ <
/View
>
+ <
/TouchableOpacity
>
+ <TextInput
+ ref
={TEXT_INPUT_REF
}
+ autoCapitalize
="none"
+ value
={this.state
.url
}
+ onSubmitEditing
={this.onSubmitEditing
}
+ onChange
={this.handleTextInputChange
}
+ clearButtonMode
="while-editing"
+ style
={styles
.addressBarTextInput
}
+
/>
+ <TouchableOpacity onPress
={this.pressGoButton
}>
+ <View style
={styles
.goButton
}>
+ <Text
>
+ Go
!
+ <
/Text
>
+ <
/View
>
+ <
/TouchableOpacity
>
+ <
/View
>
+ <WebView
+ ref
={WEBVIEW_REF
}
+ automaticallyAdjustContentInsets
={false}
+ style
={styles
.webView
}
+ url
={this.state
.url
}
+ renderError
={this.renderError
}
+ renderLoading
={this.renderLoading
}
+ onNavigationStateChange
={this.onNavigationStateChange
}
+ startInLoadingState
={true}
+
/>
+ <View style
={styles
.statusBar
}>
+ <Text style
={styles
.statusBarText
}>{this.state
.status
}<
/Text
>
+ <
/View
>
+ <
/View
>
+
);
+
},
+
+ goBack
: function() {
+
this.refs
[WEBVIEW_REF
].goBack();
+
},
+
+ goForward
: function() {
+
this.refs
[WEBVIEW_REF
].goForward();
+
},
+
+ reload
: function() {
+
this.refs
[WEBVIEW_REF
].reload();
+
},
+
+ onNavigationStateChange
: function(navState
) {
+
this.setState({
+ backButtonEnabled
: navState
.canGoBack
,
+ forwardButtonEnabled
: navState
.canGoForward
,
+ url
: navState
.url
,
+ status
: navState
.title
,
+ loading
: navState
.loading
,
+
});
+
},
+
+ renderError
: function(errorDomain
, errorCode
, errorDesc
) {
+
return (
+ <View style
={styles
.errorContainer
}>
+ <Text style
={styles
.errorTextTitle
}>
+ Error loading page
+ <
/Text
>
+ <Text style
={styles
.errorText
}>
+
{'Domain: ' + errorDomain
}
+ <
/Text
>
+ <Text style
={styles
.errorText
}>
+
{'Error Code: ' + errorCode
}
+ <
/Text
>
+ <Text style
={styles
.errorText
}>
+
{'Description: ' + errorDesc
}
+ <
/Text
>
+ <
/View
>
+
);
+
},
+
+ renderLoading
: function() {
+
return (
+ <View style
={styles
.loadingView
}>
+ <ActivityIndicatorIOS
/>
+ <
/View
>
+
);
+
},
+
+ onSubmitEditing
: function(event
) {
+
this.pressGoButton();
+
},
+
+ pressGoButton
: function() {
+
var url
= this.inputText
.toLowerCase();
+
if (url
=== this.state
.url
) {
+
this.reload();
+
} else {
+
this.setState({
+ url
: url
,
+
});
+
}
+
this.refs
[TEXT_INPUT_REF
].blur();
+
},
+
+
});
+
+
var styles
= StyleSheet
.create({
+ container
: {
+ flex
: 1,
+ backgroundColor
: HEADER
,
+
},
+ addressBarRow
: {
+ flexDirection
: 'row',
+ padding
: 8,
+
},
+ webView
: {
+ backgroundColor
: BGWASH
,
+ height
: 350,
+
},
+ addressBarTextInput
: {
+ backgroundColor
: BGWASH
,
+ borderColor
: 'transparent',
+ borderRadius
: 3,
+ borderWidth
: 1,
+ height
: 24,
+ paddingLeft
: 10,
+ paddingTop
: 3,
+ paddingBottom
: 3,
+ flex
: 1,
+ fontSize
: 14,
+
},
+ navButton
: {
+ width
: 20,
+ padding
: 3,
+ marginRight
: 3,
+ alignItems
: 'center',
+ justifyContent
: 'center',
+ backgroundColor
: BGWASH
,
+ borderColor
: 'transparent',
+ borderRadius
: 3,
+
},
+ disabledButton
: {
+ width
: 20,
+ padding
: 3,
+ marginRight
: 3,
+ alignItems
: 'center',
+ justifyContent
: 'center',
+ backgroundColor
: DISABLED_WASH
,
+ borderColor
: 'transparent',
+ borderRadius
: 3,
+
},
+ goButton
: {
+ height
: 24,
+ padding
: 3,
+ marginLeft
: 8,
+ alignItems
: 'center',
+ backgroundColor
: BGWASH
,
+ borderColor
: 'transparent',
+ borderRadius
: 3,
+ alignSelf
: 'stretch',
+
},
+ loadingView
: {
+ backgroundColor
: BGWASH
,
+ flex
: 1,
+ justifyContent
: 'center',
+ alignItems
: 'center',
+
},
+ errorContainer
: {
+ flex
: 1,
+ justifyContent
: 'center',
+ alignItems
: 'center',
+ backgroundColor
: BGWASH
,
+
},
+ errorTextTitle
: {
+ fontSize
: 15,
+ fontWeight
: '500',
+ marginBottom
: 10,
+
},
+ errorText
: {
+ fontSize
: 14,
+ textAlign
: 'center',
+ marginBottom
: 2,
+
},
+ statusBar
: {
+ flexDirection
: 'row',
+ alignItems
: 'center',
+ paddingLeft
: 5,
+ height
: 22,
+
},
+ statusBarText
: {
+ color
: 'white',
+ fontSize
: 13,
+
},
+ spinner
: {
+ width
: 20,
+ marginRight
: 6,
+
},
+
});
+
+exports
.title
= '<WebView>';
+exports
.description
= 'Base component to display web content';
+exports
.examples
= [
+
{
+ title
: 'WebView',
+
render(): ReactElement
{ return <WebViewExample
/>; }
+
}
+
]; 
React Native