kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-02-07 22:42:13 +08:00
Code Issues Packages 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
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 {