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
76ccebcfc1ecd04116dcbb372aa1c31e16066ad6
react-native/docs/alert.html
T
Website Deployment Script 95745822b6 Updated docs for 0.25
2016-05-06 16:47:40 +00:00

155 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Alert – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Alert – React Native | A framework for building 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?2"><meta property="og:description" content="A framework for building native apps using React"><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"><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=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.25</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" 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-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html#content">Tutorial</a></li></ul></div><div class="nav-docs-section"><h3>Community Resources</h3><ul><li><a style="margin-left:0;" class="" href="docs/videos.html#content">Videos</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://reactnative.cc/">Newsletter</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html#content">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html#content">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:0;" class="" href="docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/signed-apk-android.html#content">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="docs/android-ui-performance.html#content">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="docs/android-building-from-source.html#content">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/picker.html#content">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="docs/slider.html#content">Slider</a></li><li><a style="margin-left:0;" class="" href="docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbar.html#content">StatusBar</a></li><li><a style="margin-left:0;" class="" href="docs/switch.html#content">Switch</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="active" href="docs/alert.html#content">Alert</a></li><li><a style="margin-left:0;" class="" href="docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="docs/clipboard.html#content">Clipboard</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerandroid.html#content">DatePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/intentandroid.html#content">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="docs/linking.html#content">Linking</a></li><li><a style="margin-left:0;" class="" href="docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="docs/timepickerandroid.html#content">TimePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html#content">VibrationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/vibration.html#content">Vibration</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/shadowproptypesios.html#content">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html#content">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html#content">Colors</a></li></ul></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="alert"></a>Alert <a class="hash-link" href="docs/alert.html#alert">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Utilities/Alert.js">Edit on GitHub</a></td></tr></tbody></table><div><div><p>Launches an alert dialog with the specified title and message.</p><p>Optionally provide a list of buttons. Tapping any button will fire the
respective onPress callback and dismiss the alert. By default, the only
button will be an &#x27;OK&#x27; button.</p><p>This is an API that works both on iOS and Android and can show static
alerts. To show an alert that prompts the user to enter some information,
see <code>AlertIOS</code>; entering text in an alert is common on iOS only.</p><h2><a class="anchor" name="ios"></a>iOS <a class="hash-link" href="docs/alert.html#ios">#</a></h2><p>On iOS you can specify any number of buttons. Each button can optionally
specify a style, which is one of &#x27;default&#x27;, &#x27;cancel&#x27; or &#x27;destructive&#x27;.</p><h2><a class="anchor" name="android"></a>Android <a class="hash-link" href="docs/alert.html#android">#</a></h2><p>On Android at most three buttons can be specified. Android has a concept
of a neutral, negative and a positive button:</p><ul><li>If you specify one button, it will be the &#x27;positive&#x27; one (such as &#x27;OK&#x27;)</li><li>Two buttons mean &#x27;negative&#x27;, &#x27;positive&#x27; (such as &#x27;Cancel&#x27;, &#x27;OK&#x27;)</li><li>Three buttons mean &#x27;neutral&#x27;, &#x27;negative&#x27;, &#x27;positive&#x27; (such as &#x27;Later&#x27;, &#x27;Cancel&#x27;, &#x27;OK&#x27;)</li></ul><div class="prism language-javascript"><span class="token comment" spellcheck="true">// Works on both iOS and Android
</span>Alert<span class="token punctuation">.</span><span class="token function">alert<span class="token punctuation">(</span></span>
<span class="token string">&#x27;Alert Title&#x27;</span><span class="token punctuation">,</span>
<span class="token string">&#x27;My Alert Msg&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;Ask me later&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Ask me later pressed&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;Cancel&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Cancel Pressed&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token string">&#x27;cancel&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;OK&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;OK Pressed&#x27;</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><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/alert.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="alert"></a><span class="propType">static </span>alert<span class="propType">(title, message?, buttons?, type?)</span> <a class="hash-link" href="docs/alert.html#alert">#</a></h4></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/alert.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/AlertExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</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">&#x27;react&#x27;</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">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
Alert<span class="token punctuation">,</span>
StyleSheet<span class="token punctuation">,</span>
Text<span class="token punctuation">,</span>
TouchableHighlight<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> UIExplorerBlock <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./UIExplorerBlock&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// corporate ipsum &gt; lorem ipsum
</span><span class="token keyword">var</span> alertMessage <span class="token operator">=</span> <span class="token string">&#x27;Credibly reintermediate next-generation potentialities after goal-oriented &#x27;</span> <span class="token operator">+</span>
<span class="token string">&#x27;catalysts for change. Dynamically revolutionize.&#x27;</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">/**
* Simple alert examples.
*/</span>
<span class="token keyword">var</span> SimpleAlertExampleBlock <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></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>
&lt;View<span class="token operator">&gt;</span>
&lt;TouchableHighlight style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Alert<span class="token punctuation">.</span><span class="token function">alert<span class="token punctuation">(</span></span>
<span class="token string">&#x27;Alert Title&#x27;</span><span class="token punctuation">,</span>
alertMessage<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Alert <span class="token keyword">with</span> message and default button&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
&lt;TouchableHighlight style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Alert<span class="token punctuation">.</span><span class="token function">alert<span class="token punctuation">(</span></span>
<span class="token string">&#x27;Alert Title&#x27;</span><span class="token punctuation">,</span>
alertMessage<span class="token punctuation">,</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;OK&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;OK Pressed!&#x27;</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 operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Alert <span class="token keyword">with</span> one button&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
&lt;TouchableHighlight style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Alert<span class="token punctuation">.</span><span class="token function">alert<span class="token punctuation">(</span></span>
<span class="token string">&#x27;Alert Title&#x27;</span><span class="token punctuation">,</span>
alertMessage<span class="token punctuation">,</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;Cancel&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Cancel Pressed!&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;OK&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;OK Pressed!&#x27;</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 operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Alert <span class="token keyword">with</span> two buttons&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
&lt;TouchableHighlight style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Alert<span class="token punctuation">.</span><span class="token function">alert<span class="token punctuation">(</span></span>
<span class="token string">&#x27;Alert Title&#x27;</span><span class="token punctuation">,</span>
<span class="token keyword">null</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;Foo&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Foo Pressed!&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;Bar&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Bar Pressed!&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;Baz&#x27;</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Baz Pressed!&#x27;</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 operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Alert <span class="token keyword">with</span> three buttons&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
&lt;TouchableHighlight style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> Alert<span class="token punctuation">.</span><span class="token function">alert<span class="token punctuation">(</span></span>
<span class="token string">&#x27;Foo Title&#x27;</span><span class="token punctuation">,</span>
alertMessage<span class="token punctuation">,</span>
<span class="token string">&#x27;..............&#x27;</span><span class="token punctuation">.</span><span class="token function">split<span class="token punctuation">(</span></span><span class="token string">&#x27;&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>dot<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">&#x27;Button &#x27;</span> <span class="token operator">+</span> index<span class="token punctuation">,</span>
onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Pressed &#x27;</span> <span class="token operator">+</span> index<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 operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Alert <span class="token keyword">with</span> too many buttons&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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>
<span class="token keyword">var</span> AlertExample <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
statics<span class="token punctuation">:</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Alert&#x27;</span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token string">&#x27;Alerts display a concise and informative message &#x27;</span> <span class="token operator">+</span>
<span class="token string">&#x27;and prompt the user to make a decision.&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</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>
&lt;UIExplorerBlock title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">&#x27;Alert&#x27;</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;SimpleAlertExampleBlock <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</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 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>
wrapper<span class="token punctuation">:</span> <span class="token punctuation">{</span>
borderRadius<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
marginBottom<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>
button<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#eeeeee&#x27;</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 punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
AlertExample<span class="token punctuation">,</span>
SimpleAlertExampleBlock<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alertios.html#content">Next →</a></div></div><div class="column-left"><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&amp;scale=60&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22Alert%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></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></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.25" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink