kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-29 12:45:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix WebView example on iOS

Browse Source 
Summary: Fixed broken scaling logic in Webview example for iOS. Pages must be reloaded after toggling `scalesPageToFit`, but that wasn't happening.

Reviewed By: javache

Differential Revision: D2982371

fb-gh-sync-id: 8442609179bfe9ade10d1d0bac1807e4a8855d00
shipit-source-id: 8442609179bfe9ade10d1d0bac1807e4a8855d00
This commit is contained in:
Nick Lockwood
2016-02-26 08:19:40 -08:00
committed by Facebook Github Bot 7
parent f7df3bb78a
commit 7032a640e7
4 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Examples/UIExplorer/WebViewExample.js
View File

@@ -163,7 +163,7 @@ var WebViewExample = React.createClass({
var Button = React.createClass({ var Button = React.createClass({
_handlePress: function() { _handlePress: function() {
if (this.props.enabled && this.props.onPress) { if (this.props.enabled !== false && this.props.onPress) {
this.props.onPress(); this.props.onPress();
} }
}, },
@@ -182,19 +182,19 @@ var ScaledWebView = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
scalingEnabled: true scalingEnabled: true,
} }
}, },
render: function() { render: function() {
return ( return (
<View style={{height:120}}> <View>
<WebView <WebView
style={{ style={{
backgroundColor: BGWASH, backgroundColor: BGWASH,
height: 100, height: 200,
}} }}
source={{html: HTML}} source={{uri: 'https://facebook.github.io/react/'}}
scalesPageToFit={this.state.scalingEnabled} scalesPageToFit={this.state.scalingEnabled}
/> />
<View style={styles.buttons}> <View style={styles.buttons}>
@@ -307,7 +307,7 @@ const HTML = `
<head> <head>
<title>Hello Static World</title> <title>Hello Static World</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=640, user-scalable=no"> <meta name="viewport" content="width=320, user-scalable=no">
<style type="text/css"> <style type="text/css">
body { body {
margin: 0; margin: 0;
@@ -337,6 +337,10 @@ exports.examples = [
title: 'Simple Browser', title: 'Simple Browser',
render(): ReactElement { return <WebViewExample />; } render(): ReactElement { return <WebViewExample />; }
}, },
{
title: 'Scale Page to Fit',
render(): ReactElement { return <ScaledWebView/>; }
},
{ {
title: 'Bundled HTML', title: 'Bundled HTML',
render(): ReactElement { render(): ReactElement {
@@ -367,10 +371,6 @@ exports.examples = [
); );
} }
}, },
{
title: 'Scale Page to Fit',
render(): ReactElement { return <ScaledWebView/>; }
},
{ {
title: 'POST Test', title: 'POST Test',
render(): ReactElement { render(): ReactElement {

1
React/Views/RCTWebView.h
View File

@@ -35,6 +35,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
@property (nonatomic, assign) UIEdgeInsets contentInset; @property (nonatomic, assign) UIEdgeInsets contentInset;
@property (nonatomic, assign) BOOL automaticallyAdjustContentInsets; @property (nonatomic, assign) BOOL automaticallyAdjustContentInsets;
@property (nonatomic, copy) NSString *injectedJavaScript; @property (nonatomic, copy) NSString *injectedJavaScript;
@property (nonatomic, assign) BOOL scalesPageToFit;
- (void)goForward; - (void)goForward;
- (void)goBack; - (void)goBack;

13
React/Views/RCTWebView.m
View File

@@ -118,6 +118,19 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
updateOffset:NO]; updateOffset:NO];
} }
- (void)setScalesPageToFit:(BOOL)scalesPageToFit
{
if (_webView.scalesPageToFit != scalesPageToFit) {
_webView.scalesPageToFit = scalesPageToFit;
[_webView reload];
}
}
- (BOOL)scalesPageToFit
{
return _webView.scalesPageToFit;
}
- (void)setBackgroundColor:(UIColor *)backgroundColor - (void)setBackgroundColor:(UIColor *)backgroundColor
{ {
CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor); CGFloat alpha = CGColorGetAlpha(backgroundColor.CGColor);

2
React/Views/RCTWebViewManager.m
View File

@@ -36,8 +36,8 @@ RCT_EXPORT_MODULE()
RCT_EXPORT_VIEW_PROPERTY(source, NSDictionary) RCT_EXPORT_VIEW_PROPERTY(source, NSDictionary)
RCT_REMAP_VIEW_PROPERTY(bounces, _webView.scrollView.bounces, BOOL) RCT_REMAP_VIEW_PROPERTY(bounces, _webView.scrollView.bounces, BOOL)
RCT_REMAP_VIEW_PROPERTY(scrollEnabled, _webView.scrollView.scrollEnabled, BOOL) RCT_REMAP_VIEW_PROPERTY(scrollEnabled, _webView.scrollView.scrollEnabled, BOOL)
RCT_REMAP_VIEW_PROPERTY(scalesPageToFit, _webView.scalesPageToFit, BOOL)
RCT_REMAP_VIEW_PROPERTY(decelerationRate, _webView.scrollView.decelerationRate, CGFloat) RCT_REMAP_VIEW_PROPERTY(decelerationRate, _webView.scrollView.decelerationRate, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(scalesPageToFit, BOOL)
RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString) RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString)
RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets) RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL) RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)