Enable scalesPageToFit on Android
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
facebook-github-bot-4
Родитель
671b975d92
Коммит
4b97137eee
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче