mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Hector Ramos
362 lines
91 KiB
HTML
362 lines
91 KiB
HTML
<!DOCTYPE html><html><head><title>View</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="View"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.42</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:10px;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:10px;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:10px;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:10px;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:10px;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:10px;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li><li><a style="margin-left:10px;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:10px;" class="" href="docs/understanding-cli.html">Understanding the CLI</a></li><li><a style="margin-left:10px;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:10px;" class="" href="docs/running-on-device.html">Running On Device</a></li><li><a style="margin-left:10px;" class="" href="docs/upgrading.html">Upgrading</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:10px;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:10px;" class="" href="docs/native-components-ios.html">Native UI Components</a></li><li><a style="margin-left:10px;" class="" href="docs/linking-libraries-ios.html">Linking Libraries</a></li><li><a style="margin-left:10px;" class="" href="docs/running-on-simulator-ios.html">Running On Simulator</a></li><li><a style="margin-left:10px;" class="" href="docs/communication-ios.html">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:10px;" class="" href="docs/native-modules-android.html">Native Modules</a></li><li><a style="margin-left:10px;" class="" href="docs/native-components-android.html">Native UI Components</a></li><li><a style="margin-left:10px;" class="" href="docs/headless-js-android.html">Headless JS</a></li><li><a style="margin-left:10px;" class="" href="docs/signed-apk-android.html">Generating Signed APK</a></li><li><a style="margin-left:10px;" class="" href="docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:10px;" class="" href="docs/activityindicator.html">ActivityIndicator</a></li><li><a style="margin-left:10px;" class="" href="docs/button.html">Button</a></li><li><a style="margin-left:10px;" class="" href="docs/datepickerios.html">DatePickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/image.html">Image</a></li><li><a style="margin-left:10px;" class="" href="docs/keyboardavoidingview.html">KeyboardAvoidingView</a></li><li><a style="margin-left:10px;" class="" href="docs/listview.html">ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/mapview.html">MapView</a></li><li><a style="margin-left:10px;" class="" href="docs/modal.html">Modal</a></li><li><a style="margin-left:10px;" class="" href="docs/navigator.html">Navigator</a></li><li><a style="margin-left:10px;" class="" href="docs/navigatorios.html">NavigatorIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:10px;" class="" href="docs/pickerios.html">PickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/progressbarandroid.html">ProgressBarAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/progressviewios.html">ProgressViewIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/refreshcontrol.html">RefreshControl</a></li><li><a style="margin-left:10px;" class="" href="docs/scrollview.html">ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/slider.html">Slider</a></li><li><a style="margin-left:10px;" class="" href="docs/snapshotviewios.html">SnapshotViewIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/statusbar.html">StatusBar</a></li><li><a style="margin-left:10px;" class="" href="docs/switch.html">Switch</a></li><li><a style="margin-left:10px;" class="" href="docs/tabbarios.html">TabBarIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/tabbarios-item.html">TabBarIOS.Item</a></li><li><a style="margin-left:10px;" class="" href="docs/text.html">Text</a></li><li><a style="margin-left:10px;" class="" href="docs/textinput.html">TextInput</a></li><li><a style="margin-left:10px;" class="" href="docs/toolbarandroid.html">ToolbarAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablehighlight.html">TouchableHighlight</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li><a style="margin-left:10px;" class="" href="docs/touchableopacity.html">TouchableOpacity</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li><a style="margin-left:10px;" class="active" href="docs/view.html">View</a></li><li><a style="margin-left:10px;" class="" href="docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/webview.html">WebView</a></li></ul></div><div class="nav-docs-section"><h3>APIs</h3><ul><li><a style="margin-left:10px;" class="" href="docs/actionsheetios.html">ActionSheetIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/adsupportios.html">AdSupportIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/alert.html">Alert</a></li><li><a style="margin-left:10px;" class="" href="docs/alertios.html">AlertIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/animated.html">Animated</a></li><li><a style="margin-left:10px;" class="" href="docs/appregistry.html">AppRegistry</a></li><li><a style="margin-left:10px;" class="" href="docs/appstate.html">AppState</a></li><li><a style="margin-left:10px;" class="" href="docs/asyncstorage.html">AsyncStorage</a></li><li><a style="margin-left:10px;" class="" href="docs/backandroid.html">BackAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/cameraroll.html">CameraRoll</a></li><li><a style="margin-left:10px;" class="" href="docs/clipboard.html">Clipboard</a></li><li><a style="margin-left:10px;" class="" href="docs/datepickerandroid.html">DatePickerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/dimensions.html">Dimensions</a></li><li><a style="margin-left:10px;" class="" href="docs/easing.html">Easing</a></li><li><a style="margin-left:10px;" class="" href="docs/geolocation.html">Geolocation</a></li><li><a style="margin-left:10px;" class="" href="docs/imageeditor.html">ImageEditor</a></li><li><a style="margin-left:10px;" class="" href="docs/imagepickerios.html">ImagePickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/imagestore.html">ImageStore</a></li><li><a style="margin-left:10px;" class="" href="docs/interactionmanager.html">InteractionManager</a></li><li><a style="margin-left:10px;" class="" href="docs/keyboard.html">Keyboard</a></li><li><a style="margin-left:10px;" class="" href="docs/layoutanimation.html">LayoutAnimation</a></li><li><a style="margin-left:10px;" class="" href="docs/linking.html">Linking</a></li><li><a style="margin-left:10px;" class="" href="docs/nativemethodsmixin.html">NativeMethodsMixin</a></li><li><a style="margin-left:10px;" class="" href="docs/netinfo.html">NetInfo</a></li><li><a style="margin-left:10px;" class="" href="docs/panresponder.html">PanResponder</a></li><li><a style="margin-left:10px;" class="" href="docs/permissionsandroid.html">PermissionsAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/pixelratio.html">PixelRatio</a></li><li><a style="margin-left:10px;" class="" href="docs/pushnotificationios.html">PushNotificationIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/settings.html">Settings</a></li><li><a style="margin-left:10px;" class="" href="docs/share.html">Share</a></li><li><a style="margin-left:10px;" class="" href="docs/statusbarios.html">StatusBarIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/stylesheet.html">StyleSheet</a></li><li><a style="margin-left:10px;" class="" href="docs/systrace.html">Systrace</a></li><li><a style="margin-left:10px;" class="" href="docs/timepickerandroid.html">TimePickerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/toastandroid.html">ToastAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/vibration.html">Vibration</a></li><li><a style="margin-left:10px;" class="" href="docs/vibrationios.html">VibrationIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/layout-props.html">Layout Props</a></li><li><a style="margin-left:10px;" class="" href="docs/shadow-props.html">Shadow Props</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><h1><a class="anchor" name="view"></a>View <a class="hash-link" href="docs/view.html#view">#</a></h1><div><div><p>The most fundamental component for building a UI, <code>View</code> is a container that supports layout with
|
||
<a href="docs/flexbox.html" target="_blank">flexbox</a>, <a href="docs/style.html" target="_blank">style</a>,
|
||
<a href="docs/handling-touches.html" target="_blank">some touch handling</a>, and
|
||
<a href="docs/accessibility.html" target="_blank">accessibility</a> controls. <code>View</code> maps directly to the
|
||
native view equivalent on whatever platform React Native is running on, whether that is a
|
||
<code>UIView</code>, <code><div></code>, <code>android.view</code>, etc.</p><p><code>View</code> is designed to be nested inside other views and can have 0 to many children of any type.</p><p>This example creates a <code>View</code> that wraps two colored boxes and a text component in a row with
|
||
padding.</p><div class="prism language-javascript">class <span class="token class-name">ViewColoredBoxesWithText</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.3</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>Hello World<span class="token operator">!</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span></div><blockquote><p><code>View</code>s are designed to be used with <a href="docs/style.html" target="_blank"><code>StyleSheet</code></a> for clarity
|
||
and performance, although inline styles are also supported.</p></blockquote><h3><a class="anchor" name="synthetic-touch-events"></a>Synthetic Touch Events <a class="hash-link" href="docs/view.html#synthetic-touch-events">#</a></h3><p>For <code>View</code> responder props (e.g., <code>onResponderMove</code>), the synthetic touch event passed to them
|
||
are of the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event.</li><li><code>identifier</code> - The ID of the touch.</li><li><code>locationX</code> - The X position of the touch, relative to the element.</li><li><code>locationY</code> - The Y position of the touch, relative to the element.</li><li><code>pageX</code> - The X position of the touch, relative to the root element.</li><li><code>pageY</code> - The Y position of the touch, relative to the root element.</li><li><code>target</code> - The node id of the element receiving the touch event.</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation.</li><li><code>touches</code> - Array of all current touches on the screen.</li></ul></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/view.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel?: <span class="propType">node</span> <a class="hash-link" href="docs/view.html#accessibilitylabel">#</a></h4><div><p>Overrides the text that's read by the screen reader when the user interacts
|
||
with the element. By default, the label is constructed by traversing all the
|
||
children and accumulating all the <code>Text</code> nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessible">#</a></h4><div><p>When <code>true</code>, indicates that the view is an accessibility element. By default,
|
||
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hitslop"></a>hitSlop?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/view.html#hitslop">#</a></h4><div><p>This defines how far a touch event can start away from the view.
|
||
Typical interface guidelines recommend touch targets that are at least
|
||
30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to
|
||
40 with <code>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</code></p><blockquote><p>The touch area never extends past the parent view bounds and the Z-index
|
||
of sibling views always takes precedence if a touch hits two overlapping
|
||
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
|
||
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
|
||
the new layout may not yet be reflected on the screen at the time the
|
||
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
|
||
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetresponder">#</a></h4><div><p>Does this view want to "claim" touch responsiveness? This is called for every touch move on
|
||
the <code>View</code> when it is not the responder.</p><p><code>View.props.onMoveShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a
|
||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetrespondercapture"></a>onMoveShouldSetResponderCapture?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move,
|
||
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onMoveShouldSetResponderCapture: (event) => [true | false]</code>, where <code>event</code> is a
|
||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondergrant">#</a></h4><div><p>The View is now responding for touch events. This is the time to highlight and show the user
|
||
what is happening.</p><p><code>View.props.onResponderGrant: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondermove">#</a></h4><div><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderreject">#</a></h4><div><p>Another responder is already active and will not release it to that <code>View</code> asking to be
|
||
the responder.</p><p><code>View.props.onResponderReject: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminate">#</a></h4><div><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to
|
||
<code>onResponderTerminationRequest</code>, or might be taken by the OS without asking (e.g., happens
|
||
with control center/ notification center on iOS)</p><p><code>View.props.onResponderTerminate: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminationrequest">#</a></h4><div><p>Some other <code>View</code> wants to become responder and is asking this <code>View</code> to release its
|
||
responder. Returning <code>true</code> allows its release.</p><p><code>View.props.onResponderTerminationRequest: (event) => {}</code>, where <code>event</code> is a synthetic touch
|
||
event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetresponder">#</a></h4><div><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a
|
||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start,
|
||
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onStartShouldSetResponderCapture: (event) => [true | false]</code>, where <code>event</code> is a
|
||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents?: <span class="propType">enum('box-none', 'none', 'box-only', 'auto')</span> <a class="hash-link" href="docs/view.html#pointerevents">#</a></h4><div><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>'auto'</code>: The View can be the target of touch events.</li><li><code>'none'</code>: The View is never the target of touch events.</li><li><code>'box-none'</code>: The View is never the target of touch events but it's
|
||
subviews can be. It behaves like if the view had the following classes
|
||
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token punctuation">{</span>
|
||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token operator">*</span> <span class="token punctuation">{</span>
|
||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></div></li><li><code>'box-only'</code>: The view can be the target of touch events but it's
|
||
subviews cannot be. It behaves like if the view had the following classes
|
||
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token punctuation">{</span>
|
||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token operator">*</span> <span class="token punctuation">{</span>
|
||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></div><blockquote><p>Since <code>pointerEvents</code> does not affect layout/appearance, and we are
|
||
already deviating from the spec by adding additional modes, we opt to not
|
||
include <code>pointerEvents</code> on <code>style</code>. On some platforms, we would need to
|
||
implement it as a <code>className</code> anyways. Using <code>style</code> or not is an
|
||
implementation detail of the platform.</p></blockquote></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by <code>RCTView</code> and is useful
|
||
for scrolling content when there are many subviews, most of which are
|
||
offscreen. For this property to be effective, it must be applied to a
|
||
view that contains many subviews that extend outside its bound. The
|
||
subviews must also have <code>overflow: hidden</code>, as should the containing view
|
||
(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/view.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum('solid', 'dotted', 'dashed')</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android's underlying
|
||
<a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
|
||
This adds a drop shadow to the item and affects z-order for overlapping views.
|
||
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/view.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType?: <span class="propType">enum('none', 'button', 'radiobutton_checked', 'radiobutton_unchecked')</span> <a class="hash-link" href="docs/view.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
|
||
native one. Works for Android only.</p><p>Possible values are one of:</p><ul><li><code>'none'</code></li><li><code>'button'</code></li><li><code>'radiobutton_checked'</code></li><li><code>'radiobutton_unchecked'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityliveregion"></a><span class="platform">android</span>accessibilityLiveRegion?: <span class="propType">enum('none', 'polite', 'assertive')</span> <a class="hash-link" href="docs/view.html#accessibilityliveregion">#</a></h4><div><p>Indicates to accessibility services whether the user should be notified
|
||
when this view changes. Works for Android API >= 19 only.
|
||
Possible values:</p><ul><li><code>'none'</code> - Accessibility services should not announce changes to this view.</li><li><code>'polite'</code>- Accessibility services should announce changes to this view.</li><li><code>'assertive'</code> - Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li></ul><p>See the <a href="http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion" target="_blank">Android <code>View</code> docs</a>
|
||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="collapsable"></a><span class="platform">android</span>collapsable?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#collapsable">#</a></h4><div><p>Views that are only used to layout their children or otherwise don't draw
|
||
anything may be automatically removed from the native hierarchy as an
|
||
optimization. Set this property to <code>false</code> to disable this optimization and
|
||
ensure that this <code>View</code> exists in the native view hierarchy.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="importantforaccessibility"></a><span class="platform">android</span>importantForAccessibility?: <span class="propType">enum('auto', 'yes', 'no', 'no-hide-descendants')</span> <a class="hash-link" href="docs/view.html#importantforaccessibility">#</a></h4><div><p>Controls how view is important for accessibility which is if it
|
||
fires accessibility events and if it is reported to accessibility services
|
||
that query the screen. Works for Android only.</p><p>Possible values:</p><ul><li><code>'auto'</code> - The system determines whether the view is important for accessibility -
|
||
default (recommended).</li><li><code>'yes'</code> - The view is important for accessibility.</li><li><code>'no'</code> - The view is not important for accessibility.</li><li><code>'no-hide-descendants'</code> - The view is not important for accessibility,
|
||
nor are any of its descendant views.</li></ul><p>See the <a href="http://developer.android.com/reference/android/R.attr.html#importantForAccessibility" target="_blank">Android <code>importantForAccessibility</code> docs</a>
|
||
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
|
||
in order to preserve 100% correct colors and blending behavior. The default
|
||
(<code>false</code>) falls back to drawing the component and its children with an alpha
|
||
applied to the paint used to draw each element instead of rendering the full
|
||
component offscreen and compositing it back with an alpha value. This default
|
||
may be noticeable and undesired in the case where the <code>View</code> you are setting
|
||
an opacity on has multiple overlapping elements (e.g. multiple overlapping
|
||
<code>View</code>s, or text and a background).</p><p>Rendering offscreen to preserve correct alpha behavior is extremely
|
||
expensive and hard to debug for non-native developers, which is why it is
|
||
not turned on by default. If you do need to enable this property for an
|
||
animation, consider combining it with renderToHardwareTextureAndroid if the
|
||
view <strong>contents</strong> are static (i.e. it doesn't need to be redrawn each frame).
|
||
If that property is enabled, this View will be rendered off-screen once,
|
||
saved in a hardware texture, and then composited onto the screen with an alpha
|
||
each frame without having to switch rendering targets on the GPU.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendertohardwaretextureandroid"></a><span class="platform">android</span>renderToHardwareTextureAndroid?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#rendertohardwaretextureandroid">#</a></h4><div><p>Whether this <code>View</code> should render itself (and all of its children) into a
|
||
single hardware texture on the GPU.</p><p>On Android, this is useful for animations and interactions that only
|
||
modify opacity, rotation, translation, and/or scale: in those cases, the
|
||
view doesn't have to be redrawn and display lists don't need to be
|
||
re-executed. The texture can just be re-used and re-composited with
|
||
different parameters. The downside is that this can use up limited video
|
||
memory, so this prop should be set back to false at the end of the
|
||
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a><span class="platform">ios</span>accessibilityTraits?: <span class="propType"><span><span>enum('none', 'button', 'link', 'header', 'search', 'image', 'selected', 'plays', 'key', 'text', 'summary', 'disabled', 'frequentUpdates', 'startsMedia', 'adjustable', 'allowsDirectInteraction', 'pageTurn'), </span><span>[enum('none', 'button', 'link', 'header', 'search', 'image', 'selected', 'plays', 'key', 'text', 'summary', 'disabled', 'frequentUpdates', 'startsMedia', 'adjustable', 'allowsDirectInteraction', 'pageTurn')]</span></span></span> <a class="hash-link" href="docs/view.html#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
|
||
provided unless specified otherwise in element.</p><p>You can provide one trait or an array of many traits.</p><p>Possible values for <code>AccessibilityTraits</code> are:</p><ul><li><code>'none'</code> - The element has no traits.</li><li><code>'button'</code> - The element should be treated as a button.</li><li><code>'link'</code> - The element should be treated as a link.</li><li><code>'header'</code> - The element is a header that divides content into sections.</li><li><code>'search'</code> - The element should be treated as a search field.</li><li><code>'image'</code> - The element should be treated as an image.</li><li><code>'selected'</code> - The element is selected.</li><li><code>'plays'</code> - The element plays sound.</li><li><code>'key'</code> - The element should be treated like a keyboard key.</li><li><code>'text'</code> - The element should be treated as text.</li><li><code>'summary'</code> - The element provides app summary information.</li><li><code>'disabled'</code> - The element is disabled.</li><li><code>'frequentUpdates'</code> - The element frequently changes its value.</li><li><code>'startsMedia'</code> - The element starts a media session.</li><li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li><li><code>'allowsDirectInteraction'</code> - The element allows direct touch interaction for VoiceOver users.</li><li><code>'pageTurn'</code> - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li></ul><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
|
||
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldrasterizeios"></a><span class="platform">ios</span>shouldRasterizeIOS?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#shouldrasterizeios">#</a></h4><div><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not
|
||
modify this component's dimensions nor its children; for example, when
|
||
translating the position of a static view, rasterization allows the
|
||
renderer to reuse a cached bitmap of a static view and quickly composite
|
||
it during each frame.</p><p>Rasterization incurs an off-screen drawing pass and the bitmap consumes
|
||
memory. Test and measure when using this property.</p></div></div></div></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/View/View.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/view.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||
StyleSheet<span class="token punctuation">,</span>
|
||
Text<span class="token punctuation">,</span>
|
||
View<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> TouchableWithoutFeedback <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'TouchableWithoutFeedback'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||
box<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#527FE4'</span><span class="token punctuation">,</span>
|
||
borderColor<span class="token punctuation">:</span> <span class="token string">'#000033'</span><span class="token punctuation">,</span>
|
||
borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
zIndex<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
justifyContent<span class="token punctuation">:</span> <span class="token string">'space-around'</span><span class="token punctuation">,</span>
|
||
width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||
marginTop<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
class <span class="token class-name">ViewBorderStyleExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
showBorder<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_handlePress<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
borderStyle<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>showBorder <span class="token operator">?</span> <span class="token string">'dashed'</span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
padding<span class="token punctuation">:</span> <span class="token number">5</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
Dashed border style
|
||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
marginTop<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||
borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
borderRadius<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||
borderStyle<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>showBorder <span class="token operator">?</span> <span class="token string">'dotted'</span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||
padding<span class="token punctuation">:</span> <span class="token number">5</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
Dotted border style
|
||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
_handlePress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>showBorder<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>showBorder<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
class <span class="token class-name">ZIndexExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
flipped<span class="token punctuation">:</span> <span class="token boolean">false</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
const indices <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>flipped <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span> <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_handlePress<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<View<span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>paddingBottom<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>Tap to flip sorting order<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||
styles<span class="token punctuation">.</span>zIndex<span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'#E57373'</span><span class="token punctuation">,</span> zIndex<span class="token punctuation">:</span> indices<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>ZIndex <span class="token punctuation">{</span>indices<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||
styles<span class="token punctuation">.</span>zIndex<span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>marginLeft<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'#FFF176'</span><span class="token punctuation">,</span> zIndex<span class="token punctuation">:</span> indices<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>ZIndex <span class="token punctuation">{</span>indices<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||
styles<span class="token punctuation">.</span>zIndex<span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>marginLeft<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'#81C784'</span><span class="token punctuation">,</span> zIndex<span class="token punctuation">:</span> indices<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>ZIndex <span class="token punctuation">{</span>indices<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||
styles<span class="token punctuation">.</span>zIndex<span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>marginLeft<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'#64B5F6'</span><span class="token punctuation">,</span> zIndex<span class="token punctuation">:</span> indices<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>ZIndex <span class="token punctuation">{</span>indices<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">}</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
_handlePress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>flipped<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>flipped<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'<View>'</span><span class="token punctuation">;</span>
|
||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Basic building block of all UI, examples that '</span> <span class="token operator">+</span>
|
||
<span class="token string">'demonstrate some of the many styles available.'</span><span class="token punctuation">;</span>
|
||
|
||
exports<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token string">'ViewExample'</span><span class="token punctuation">;</span>
|
||
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Background Color'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'#527FE4'</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
Blue background
|
||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Border'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>borderColor<span class="token punctuation">:</span> <span class="token string">'#527FE4'</span><span class="token punctuation">,</span> borderWidth<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>5px blue border<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Padding/Margin'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>borderColor<span class="token punctuation">:</span> <span class="token string">'#bb0000'</span><span class="token punctuation">,</span> borderWidth<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>box<span class="token punctuation">,</span> <span class="token punctuation">{</span>padding<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>5px padding<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>box<span class="token punctuation">,</span> <span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>5px margin<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>box<span class="token punctuation">,</span> <span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> alignSelf<span class="token punctuation">:</span> <span class="token string">'flex-start'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
5px margin and padding<span class="token punctuation">,</span>
|
||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
widthAutonomous<span class="token operator">=</span><span class="token boolean">true</span>
|
||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Border Radius'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>borderWidth<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> borderRadius<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontSize<span class="token punctuation">:</span> <span class="token number">11</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
Too much use of `borderRadius` <span class="token punctuation">(</span>especially large radii<span class="token punctuation">)</span> on
|
||
anything which is scrolling may result <span class="token keyword">in</span> dropped frames<span class="token punctuation">.</span>
|
||
Use sparingly<span class="token punctuation">.</span>
|
||
<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Border Style'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <ViewBorderStyleExample <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Circle with Border Radius'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>borderRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Overflow'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<View
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
width<span class="token punctuation">:</span> <span class="token number">95</span><span class="token punctuation">,</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||
marginRight<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||
marginBottom<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||
overflow<span class="token punctuation">:</span> <span class="token string">'hidden'</span><span class="token punctuation">,</span>
|
||
borderWidth<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>Overflow hidden<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">95</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> marginBottom<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span> borderWidth<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>Overflow visible<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Opacity'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><Text<span class="token operator">></span>Opacity <span class="token number">0</span><<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><Text<span class="token operator">></span>Opacity <span class="token number">0.1</span><<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token number">0.3</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><Text<span class="token operator">></span>Opacity <span class="token number">0.3</span><<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><Text<span class="token operator">></span>Opacity <span class="token number">0.5</span><<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token number">0.7</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><Text<span class="token operator">></span>Opacity <span class="token number">0.7</span><<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token number">0.9</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><Text<span class="token operator">></span>Opacity <span class="token number">0.9</span><<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><Text<span class="token operator">></span>Opacity <span class="token number">1</span><<span class="token operator">/</span>Text<span class="token operator">></span><<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'ZIndex'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <ZIndexExample <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span></div><div class="embedded-simulator"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22View%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/touchablewithoutfeedback.html#content">← Prev</a><a class="docs-next" href="docs/viewpagerandroid.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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");
|
||
|
||
docsearch({
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#algolia-doc-search',
|
||
algoliaOptions: { facetFilters: [ "tags:0.42" ], hitsPerPage: 5 }
|
||
});
|
||
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script></body></html> |