Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
44f3f386c347e7a38fbc326fae70345920cf367d
react-native/docs/stylesheet.html
T
Christopher Chedeau 44f3f386c3 update website
2015-03-14 17:00:52 -07:00

140 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | Build Native Apps Using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | Build Native Apps Using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="Build Native Apps Using React"><link rel="shortcut icon" href="/react-native/img/favicon.png"><link rel="stylesheet" href="/react-native/css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href="/react-native/"><img src="/react-native/img/logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="active">docs</a></li><li><a href="/react-native/support.html" class="">support</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixels.html#content">Physical vs Logical Pixels</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/expandingtext.html#content">ExpandingText</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/slider.html#content">Slider</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/animation.html#content">Animation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li></ul></div></div><div class="inner-content"><a id="content"></a><h1>StyleSheet</h1><div><div><p>A StyleSheet is an abstraction similar to CSS StyleSheets</p><p>Create a new StyleSheet:</p><p>var styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: &#x27;#d6d7da&#x27;,
},
title: {
fontSize: 19,
fontWeight: &#x27;bold&#x27;,
},
activeTitle: {
color: &#x27;red&#x27;,
},
})</p><p>Use a StyleSheet:</p>&lt;View style={styles.container}&gt;
&lt;Text style={[styles.title, this.props.isActive &amp;&amp; styles.activeTitle]} /&gt;
&lt;/View&gt;
<p>Code quality:
- By moving styles away from the render function, you&#x27;re making the code
code easier to understand.
- Naming the styles is a good way to add meaning to the low level components
in the render function.</p><p>Performance:
- Making a stylesheet from a style object makes it possible to refer to it
by ID instead of creating a new style object every time.
- It also allows to send the style only once through the bridge. All
subsequent uses are going to refer an id (not implemented yet).</p></div><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create(<span class="propType">obj</span>) <a class="hash-link" href="#create">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="validatestyleprop"></a><span class="propType">static </span>validateStyleProp(<span class="propType">prop, style, caller</span>) <a class="hash-link" href="#validatestyleprop">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="validatestyle"></a><span class="propType">static </span>validateStyle(<span class="propType">name, styles</span>) <a class="hash-link" href="#validatestyle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addvalidstyleproptypes"></a><span class="propType">static </span>addValidStylePropTypes(<span class="propType">stylePropTypes</span>) <a class="hash-link" href="#addvalidstyleproptypes">#</a></h4></div></div><pre>{
&quot;methods&quot;: [
{
&quot;line&quot;: 55,
&quot;source&quot;: &quot;static create(obj) {\n var result = {};\n for (var key in obj) {\n StyleSheet.validateStyle(key, obj);\n result[key] = StyleSheetRegistry.registerStyle(obj[key]);\n }\n return result;\n }&quot;,
&quot;modifiers&quot;: [
&quot;static&quot;
],
&quot;params&quot;: [
{
&quot;typehint&quot;: null,
&quot;name&quot;: &quot;obj&quot;
}
],
&quot;tparams&quot;: null,
&quot;returntypehint&quot;: null,
&quot;name&quot;: &quot;create&quot;
},
{
&quot;line&quot;: 64,
&quot;source&quot;: &quot;static validateStyleProp(prop, style, caller) {\n if (!__DEV__) {\n return;\n }\n if (allStylePropTypes[prop] === undefined) {\n var message1 = &#x27;\&quot;&#x27; + prop + &#x27;\&quot; is not a valid style property.&#x27;;\n var message2 = &#x27;\\nValid style props: &#x27; +\n JSON.stringify(Object.keys(allStylePropTypes), null, &#x27; &#x27;);\n styleError(message1, style, caller, message2);\n }\n var error = allStylePropTypes[prop](\n style,\n prop,\n caller,\n ReactPropTypeLocations.prop\n );\n if (error) {\n styleError(error.message, style, caller);\n }\n }&quot;,
&quot;modifiers&quot;: [
&quot;static&quot;
],
&quot;params&quot;: [
{
&quot;typehint&quot;: null,
&quot;name&quot;: &quot;prop&quot;
},
{
&quot;typehint&quot;: null,
&quot;name&quot;: &quot;style&quot;
},
{
&quot;typehint&quot;: null,
&quot;name&quot;: &quot;caller&quot;
}
],
&quot;tparams&quot;: null,
&quot;returntypehint&quot;: null,
&quot;name&quot;: &quot;validateStyleProp&quot;
},
{
&quot;line&quot;: 85,
&quot;source&quot;: &quot;static validateStyle(name, styles) {\n if (!__DEV__) {\n return;\n }\n for (var prop in styles[name]) {\n StyleSheet.validateStyleProp(prop, styles[name], &#x27;StyleSheet &#x27; + name);\n }\n }&quot;,
&quot;modifiers&quot;: [
&quot;static&quot;
],
&quot;params&quot;: [
{
&quot;typehint&quot;: null,
&quot;name&quot;: &quot;name&quot;
},
{
&quot;typehint&quot;: null,
&quot;name&quot;: &quot;styles&quot;
}
],
&quot;tparams&quot;: null,
&quot;returntypehint&quot;: null,
&quot;name&quot;: &quot;validateStyle&quot;
},
{
&quot;line&quot;: 94,
&quot;source&quot;: &quot;static addValidStylePropTypes(stylePropTypes) {\n for (var key in stylePropTypes) {\n invariant(\n allStylePropTypes[key] === undefined ||\n allStylePropTypes[key] === stylePropTypes[key],\n &#x27;Attemped to redefine existing style prop type \&quot;&#x27; + key + &#x27;\&quot;.&#x27;\n );\n allStylePropTypes[key] = stylePropTypes[key];\n }\n }&quot;,
&quot;modifiers&quot;: [
&quot;static&quot;
],
&quot;params&quot;: [
{
&quot;typehint&quot;: null,
&quot;name&quot;: &quot;stylePropTypes&quot;
}
],
&quot;tparams&quot;: null,
&quot;returntypehint&quot;: null,
&quot;name&quot;: &quot;addValidStylePropTypes&quot;
}
],
&quot;type&quot;: &quot;api&quot;,
&quot;line&quot;: 54,
&quot;name&quot;: &quot;StyleSheet&quot;,
&quot;docblock&quot;: &quot;/**\n * A StyleSheet is an abstraction similar to CSS StyleSheets\n *\n * Create a new StyleSheet:\n *\n * var styles = StyleSheet.create({\n * container: {\n * borderRadius: 4,\n * borderWidth: 0.5,\n * borderColor: &#x27;#d6d7da&#x27;,\n * },\n * title: {\n * fontSize: 19,\n * fontWeight: &#x27;bold&#x27;,\n * },\n * activeTitle: {\n * color: &#x27;red&#x27;,\n * },\n * })\n *\n * Use a StyleSheet:\n *\n * &lt;View style={styles.container}&gt;\n * &lt;Text style={[styles.title, this.props.isActive &amp;&amp; styles.activeTitle]} /&gt;\n * &lt;/View&gt;\n *\n * Code quality:\n * - By moving styles away from the render function, you&#x27;re making the code\n * code easier to understand.\n * - Naming the styles is a good way to add meaning to the low level components\n * in the render function.\n *\n * Performance:\n * - Making a stylesheet from a style object makes it possible to refer to it\n * by ID instead of creating a new style object every time.\n * - It also allows to send the style only once through the bridge. All\n * subsequent uses are going to refer an id (not implemented yet).\n */\n&quot;,
&quot;requires&quot;: [
{
&quot;name&quot;: &quot;ImageStylePropTypes&quot;
},
{
&quot;name&quot;: &quot;ReactPropTypeLocations&quot;
},
{
&quot;name&quot;: &quot;StyleSheetRegistry&quot;
},
{
&quot;name&quot;: &quot;TextStylePropTypes&quot;
},
{
&quot;name&quot;: &quot;ViewStylePropTypes&quot;
},
{
&quot;name&quot;: &quot;invariant&quot;
}
]
}</pre></div><noscript></noscript><div class="docs-prevnext"></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink