status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 01:40:08 +00:00
Code Issues Projects Releases Wiki Activity

Enable scalesPageToFit on Android

Browse Source 
Summary:PR for https://github.com/facebook/react-native/issues/5958. The viewport meta tags if present, are overridden from the page and it is rendered according to the screen size. An example has been added in the Web View section of UIExplorer demo app.
Closes https://github.com/facebook/react-native/pull/6013

Differential Revision: D2953940

Pulled By: nicklockwood

fb-gh-sync-id: 012769f3a2a3f7dc942b60de02a9d1b80a27236e
shipit-source-id: 012769f3a2a3f7dc942b60de02a9d1b80a27236e
This commit is contained in:
AbilashK 2016-02-19 06:27:31 -08:00 committed by facebook-github-bot-4
parent 671b975d92
commit 4b97137eee
4 changed files with 87 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
Examples/UIExplorer/WebViewExample.js
View File

@ -20,6 +20,7 @@ var {
StyleSheet,
Text,
TextInput,
TouchableWithoutFeedback,
TouchableOpacity,
View,
WebView
@ -160,6 +161,60 @@ var WebViewExample = React.createClass({
});
var Button = React.createClass({
_handlePress: function() {
if (this.props.enabled && this.props.onPress) {
this.props.onPress();
}
},
render: function() {
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View style={[styles.button, this.props.enabled ? {} : styles.buttonDisabled]}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</View>
</TouchableWithoutFeedback>
);
}
});
var ScaledWebView = React.createClass({
getInitialState: function() {
return {
scalingEnabled: true
}
},
render: function() {
return (
<View style={{height:120}}>
<WebView
style={{
backgroundColor: BGWASH,
height: 100,
}}
source={{html: HTML}}
scalesPageToFit={this.state.scalingEnabled}
/>
<View style={styles.buttons}>
{ this.state.scalingEnabled ?
<Button
text="Scaling:ON"
enabled={true}
onPress={() => this.setState({scalingEnabled: false})}
/> :
<Button
text="Scaling:OFF"
enabled={true}
onPress={() => this.setState({scalingEnabled: true})}
/> }
</View>
</View>
);
},
})
var styles = StyleSheet.create({
container: {
flex: 1,
@ -229,6 +284,21 @@ var styles = StyleSheet.create({
width: 20,
marginRight: 6,
},
buttons: {
flexDirection: 'row',
height: 30,
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'space-between',
},
button: {
flex: 0.5,
width: 0,
margin: 5,
borderColor: 'gray',
borderWidth: 1,
backgroundColor: 'gray',
},
});
const HTML = `
@ -237,7 +307,7 @@ const HTML = `
<head>
<title>Hello Static World</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320, user-scalable=no">
<meta name="viewport" content="width=640, user-scalable=no">
<style type="text/css">
body {
margin: 0;
@ -297,6 +367,10 @@ exports.examples = [
);
}
},
{
title: 'Scale Page to Fit',
render(): ReactElement { return <ScaledWebView/>; }
},
{
title: 'POST Test',
render(): ReactElement {

7
Libraries/Components/WebView/WebView.android.js
View File

@ -122,6 +122,11 @@ var WebView = React.createClass({
*/
injectedJavaScript: PropTypes.string,
/**
* Sets whether the webpage scales to fit the view and the user can change the scale.
*/
scalesPageToFit: PropTypes.bool,
/**
* Sets the user-agent for this WebView. The user-agent can also be set in native using
* WebViewConfig. This prop will overwrite that config.
@ -145,6 +150,7 @@ var WebView = React.createClass({
getDefaultProps: function() {
return {
javaScriptEnabled : true,
scalesPageToFit: true,
};
},
@ -195,6 +201,7 @@ var WebView = React.createClass({
key="webViewKey"
style={webViewStyles}
source={resolveAssetSource(source)}
scalesPageToFit={this.props.scalesPageToFit}
injectedJavaScript={this.props.injectedJavaScript}
userAgent={this.props.userAgent}
javaScriptEnabled={this.props.javaScriptEnabled}

1
Libraries/Components/WebView/WebView.ios.js
View File

@ -213,7 +213,6 @@ var WebView = React.createClass({
/**
* Sets whether the webpage scales to fit the view and the user can change the scale.
* @platform ios
*/
scalesPageToFit: PropTypes.bool,

5
ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java
View File

@ -259,6 +259,11 @@ public class ReactWebViewManager extends SimpleViewManager<WebView> {
view.getSettings().setJavaScriptEnabled(enabled);
}
@ReactProp(name = "scalesPageToFit")
public void setScalesPageToFit(WebView view, boolean enabled) {
view.getSettings().setUseWideViewPort(!enabled);
}
@ReactProp(name = "domStorageEnabled")
public void setDomStorageEnabled(WebView view, boolean enabled) {
view.getSettings().setDomStorageEnabled(enabled);