kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-02-07 09:17:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support non-image assets in packager

Browse Source 
Summary:
public
The packager currently assumes that all assets that are not JSON or JS files must be images. Although it is possible to add other extension types, they crash the packager if you try to require them, because it attempts to get their dimensions, assuming that they are an image.

This is a crude workaround for that problem, which skips the image-specific processing for non-image assets, but really it would be better if the packager was properly aware of different asset types and treated them differently (e.g. for sounds it could include the duration, for HTML pages it could parse and include linked CSS files, etc).

I've also added an example of using `require('...')` to load a packager-managed HTML page in the UIExplorer WebView example. In future I anticipate that all static asset types (sounds, fonts, etc.) could be handled in this way, which allows them to be edited or added/removed on the fly instead of needing to restart the app.

Reviewed By: martinbigio

Differential Revision: D2895619

fb-gh-sync-id: cd93794ca66bad838621cd7df3ff3c62b5645e85
This commit is contained in:
Nick Lockwood
2016-02-03 17:30:01 -08:00
committed by facebook-github-bot-7
parent 0e0f20c806
commit 81fb985335
8 changed files with 119 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
Examples/UIExplorer/WebViewExample.js
View File

@@ -50,7 +50,7 @@ var WebViewExample = React.createClass({
handleTextInputChange: function(event) {
var url = event.nativeEvent.text;
if (!/^[a-zA-Z-_]:/.test(url)) {
if (!/^[a-zA-Z-_]+:/.test(url)) {
url = 'http://' + url;
}
this.inputText = url;
@@ -231,6 +231,34 @@ var styles = StyleSheet.create({
},
});
const HTML = `
<!DOCTYPE html>\n
<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">
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 62.5% arial, sans-serif;
background: #ccc;
}
h1 {
padding: 45px;
margin: 0;
text-align: center;
color: #33f;
}
</style>
</head>
<body>
<h1>Hello Static World</h1>
</body>
</html>
`;
exports.displayName = (undefined: ?string);
exports.title = '<WebView>';
exports.description = 'Base component to display web content';
@@ -239,6 +267,36 @@ exports.examples = [
title: 'Simple Browser',
render(): ReactElement { return <WebViewExample />; }
},
{
title: 'Bundled HTML',
render(): ReactElement {
return (
<WebView
style={{
backgroundColor: BGWASH,
height: 100,
}}
source={require('./helloworld.html')}
scalesPageToFit={true}
/>
);
}
},
{
title: 'Static HTML',
render(): ReactElement {
return (
<WebView
style={{
backgroundColor: BGWASH,
height: 100,
}}
source={{html: HTML}}
scalesPageToFit={true}
/>
);
}
},
{
title: 'POST Test',
render(): ReactElement {