mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
217 lines
54 KiB
HTML
217 lines
54 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>ScrollView – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="ScrollView – 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.20</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="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="showcase.html" class="">Showcase</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/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="docs/linux-windows-support.html#content">Linux and Windows Support</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="docs/videos.html#content">Videos</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/pulltorefreshviewandroid.html#content">PullToRefreshViewAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="active" 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/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="" 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/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/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html#content">VibrationIOS</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/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="scrollview"></a>ScrollView <a class="hash-link" href="#scrollview">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js">Edit on GitHub</a></td></tr></tbody></table><div><div><p>Component that wraps platform ScrollView while providing
|
||
integration with touch locking "responder" system.</p><p>Keep in mind that ScrollViews must have a bounded height in order to work,
|
||
since they contain unbounded-height children into a bounded container (via
|
||
a scroll interaction). In order to bound the height of a ScrollView, either
|
||
set the height of the view directly (discouraged) or make sure all parent
|
||
views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the
|
||
view stack can lead to errors here, which the element inspector makes
|
||
easy to debug.</p><p>Doesn't yet support other contained responders from blocking this scroll
|
||
view from becoming the responder.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle <span class="propType">StyleSheetPropType(ViewStylePropTypes)</span> <a class="hash-link" href="#contentcontainerstyle">#</a></h4><div><p>These styles will be applied to the scroll view content container which
|
||
wraps all of the child views. Example:</p><p> return (
|
||
<ScrollView contentContainerStyle={styles.contentContainer}>
|
||
</ScrollView>
|
||
);
|
||
...
|
||
var styles = StyleSheet.create({
|
||
contentContainer: {
|
||
paddingVertical: 20
|
||
}
|
||
});</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal <span class="propType">bool</span> <a class="hash-link" href="#horizontal">#</a></h4><div><p>When true, the scroll view's children are arranged horizontally in a row
|
||
instead of vertically in a column. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode <span class="propType">enum('none', 'interactive', 'on-drag')</span> <a class="hash-link" href="#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
|
||
- 'none' (the default), drags do not dismiss the keyboard.
|
||
- 'on-drag', the keyboard is dismissed when a drag begins.
|
||
- 'interactive', the keyboard is dismissed interactively with the drag and moves in
|
||
synchrony with the touch; dragging upwards cancels the dismissal.
|
||
On android this is not supported and it will have the same behavior as 'none'.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardshouldpersisttaps"></a>keyboardShouldPersistTaps <span class="propType">bool</span> <a class="hash-link" href="#keyboardshouldpersisttaps">#</a></h4><div><p>When false, tapping outside of the focused text input when the keyboard
|
||
is up dismisses the keyboard. When true, the scroll view will not catch
|
||
taps, and the keyboard will not dismiss automatically. The default value
|
||
is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oncontentsizechange"></a>onContentSizeChange <span class="propType">function</span> <a class="hash-link" href="#oncontentsizechange">#</a></h4><div><p>Called when scrollable content view of the ScrollView changes. It's
|
||
implemented using onLayout handler attached to the content container
|
||
which this ScrollView renders.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscroll"></a>onScroll <span class="propType">function</span> <a class="hash-link" href="#onscroll">#</a></h4><div><p>Fires at most once per frame during scrolling. The frequency of the
|
||
events can be controlled using the <code>scrollEventThrottle</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshcontrol"></a>refreshControl <span class="propType">element</span> <a class="hash-link" href="#refreshcontrol">#</a></h4><div><p>A RefreshControl component, used to provide pull-to-refresh
|
||
functionality for the ScrollView.</p><p>See <a href="docs/refreshcontrol.html" target="_blank">RefreshControl</a>.</p></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="#removeclippedsubviews">#</a></h4><div><p>Experimental: When true, offscreen child views (whose <code>overflow</code> value is
|
||
<code>hidden</code>) are removed from their native backing superview when offscreen.
|
||
This can improve scrolling performance on long lists. The default value is
|
||
true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
|
||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator <span class="propType">bool</span> <a class="hash-link" href="#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator <span class="propType">bool</span> <a class="hash-link" href="#showsverticalscrollindicator">#</a></h4><div><p>When true, shows a vertical scroll indicator.</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="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">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">overflow <span class="propType">enum('visible', 'hidden')</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="sendmomentumevents"></a><span class="platform">android</span>sendMomentumEvents <span class="propType">bool</span> <a class="hash-link" href="#sendmomentumevents">#</a></h4><div><p>When true, momentum events will be sent from Android
|
||
This is internal and set automatically by the framework if you have
|
||
onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncehorizontal"></a><span class="platform">ios</span>alwaysBounceHorizontal <span class="propType">bool</span> <a class="hash-link" href="#alwaysbouncehorizontal">#</a></h4><div><p>When true, the scroll view bounces horizontally when it reaches the end
|
||
even if the content is smaller than the scroll view itself. The default
|
||
value is true when <code>horizontal={true}</code> and false otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncevertical"></a><span class="platform">ios</span>alwaysBounceVertical <span class="propType">bool</span> <a class="hash-link" href="#alwaysbouncevertical">#</a></h4><div><p>When true, the scroll view bounces vertically when it reaches the end
|
||
even if the content is smaller than the scroll view itself. The default
|
||
value is false when <code>horizontal={true}</code> and true otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a><span class="platform">ios</span>automaticallyAdjustContentInsets <span class="propType">bool</span> <a class="hash-link" href="#automaticallyadjustcontentinsets">#</a></h4><div><p>Controls whether iOS should automatically adjust the content inset
|
||
for scroll views that are placed behind a navigation bar or
|
||
tab bar/ toolbar. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces <span class="propType">bool</span> <a class="hash-link" href="#bounces">#</a></h4><div><p>When true, the scroll view bounces when it reaches the end of the
|
||
content if the content is larger then the scroll view along the axis of
|
||
the scroll direction. When false, it disables all bouncing even if
|
||
the <code>alwaysBounce*</code> props are true. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounceszoom"></a><span class="platform">ios</span>bouncesZoom <span class="propType">bool</span> <a class="hash-link" href="#bounceszoom">#</a></h4><div><p>When true, gestures can drive zoom past min/max and the zoom will animate
|
||
to the min/max value at gesture end, otherwise the zoom will not exceed
|
||
the limits.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cancancelcontenttouches"></a><span class="platform">ios</span>canCancelContentTouches <span class="propType">bool</span> <a class="hash-link" href="#cancancelcontenttouches">#</a></h4><div><p>When false, once tracking starts, won't try to drag if the touch moves.
|
||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="centercontent"></a><span class="platform">ios</span>centerContent <span class="propType">bool</span> <a class="hash-link" href="#centercontent">#</a></h4><div><p>When true, the scroll view automatically centers the content when the
|
||
content is smaller than the scroll view bounds; when the content is
|
||
larger than the scroll view, this property has no effect. The default
|
||
value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a><span class="platform">ios</span>contentInset <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#contentinset">#</a></h4><div><p>The amount by which the scroll view content is inset from the edges
|
||
of the scroll view. Defaults to <code>{0, 0, 0, 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentoffset"></a><span class="platform">ios</span>contentOffset <span class="propType">PointPropType</span> <a class="hash-link" href="#contentoffset">#</a></h4><div><p>Used to manually set the starting scroll offset.
|
||
The default value is <code>{x: 0, y: 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a><span class="platform">ios</span>decelerationRate <span class="propType">enum('fast', 'normal'), number</span> <a class="hash-link" href="#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
|
||
decelerates after the user lifts their finger. You may also use string
|
||
shortcuts <code>"normal"</code> and <code>"fast"</code> which match the underlying iOS settings
|
||
for <code>UIScrollViewDecelerationRateNormal</code> and
|
||
<code>UIScrollViewDecelerationRateFast</code> respectively.
|
||
- Normal: 0.998 (the default)
|
||
- Fast: 0.9</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="directionallockenabled"></a><span class="platform">ios</span>directionalLockEnabled <span class="propType">bool</span> <a class="hash-link" href="#directionallockenabled">#</a></h4><div><p>When true, the ScrollView will try to lock to only vertical or horizontal
|
||
scrolling while dragging. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indicatorstyle"></a><span class="platform">ios</span>indicatorStyle <span class="propType">enum('default', 'black', 'white')</span> <a class="hash-link" href="#indicatorstyle">#</a></h4><div><p>The style of the scroll indicators.
|
||
- <code>default</code> (the default), same as <code>black</code>.
|
||
- <code>black</code>, scroll indicator is black. This style is good against a white content background.
|
||
- <code>white</code>, scroll indicator is white. This style is good against a black content background.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumzoomscale"></a><span class="platform">ios</span>maximumZoomScale <span class="propType">number</span> <a class="hash-link" href="#maximumzoomscale">#</a></h4><div><p>The maximum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumzoomscale"></a><span class="platform">ios</span>minimumZoomScale <span class="propType">number</span> <a class="hash-link" href="#minimumzoomscale">#</a></h4><div><p>The minimum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefreshstart"></a><span class="platform">ios</span>onRefreshStart <span class="propType">function</span> <a class="hash-link" href="#onrefreshstart">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>refreshControl</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscrollanimationend"></a><span class="platform">ios</span>onScrollAnimationEnd <span class="propType">function</span> <a class="hash-link" href="#onscrollanimationend">#</a></h4><div><p>Called when a scrolling animation ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagingenabled"></a><span class="platform">ios</span>pagingEnabled <span class="propType">bool</span> <a class="hash-link" href="#pagingenabled">#</a></h4><div><p>When true, the scroll view stops on multiples of the scroll view's size
|
||
when scrolling. This can be used for horizontal pagination. The default
|
||
value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a><span class="platform">ios</span>scrollEventThrottle <span class="propType">number</span> <a class="hash-link" href="#scrolleventthrottle">#</a></h4><div><p>This controls how often the scroll event will be fired while scrolling
|
||
(in events per seconds). A higher number yields better accuracy for code
|
||
that is tracking the scroll position, but can lead to scroll performance
|
||
problems due to the volume of information being send over the bridge.
|
||
The default value is zero, which means the scroll event will be sent
|
||
only once each time the view is scrolled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollindicatorinsets"></a><span class="platform">ios</span>scrollIndicatorInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#scrollindicatorinsets">#</a></h4><div><p>The amount by which the scroll view indicators are inset from the edges
|
||
of the scroll view. This should normally be set to the same value as
|
||
the <code>contentInset</code>. Defaults to <code>{0, 0, 0, 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollstotop"></a><span class="platform">ios</span>scrollsToTop <span class="propType">bool</span> <a class="hash-link" href="#scrollstotop">#</a></h4><div><p>When true, the scroll view scrolls to top when the status bar is tapped.
|
||
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptoalignment"></a><span class="platform">ios</span>snapToAlignment <span class="propType">enum('start', 'center', 'end')</span> <a class="hash-link" href="#snaptoalignment">#</a></h4><div><p>When <code>snapToInterval</code> is set, <code>snapToAlignment</code> will define the relationship
|
||
of the the snapping to the scroll view.
|
||
- <code>start</code> (the default) will align the snap at the left (horizontal) or top (vertical)
|
||
- <code>center</code> will align the snap in the center
|
||
- <code>end</code> will align the snap at the right (horizontal) or bottom (vertical)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptointerval"></a><span class="platform">ios</span>snapToInterval <span class="propType">number</span> <a class="hash-link" href="#snaptointerval">#</a></h4><div><p>When set, causes the scroll view to stop at multiples of the value of
|
||
<code>snapToInterval</code>. This can be used for paginating through children
|
||
that have lengths smaller than the scroll view. Used in combination
|
||
with <code>snapToAlignment</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a><span class="platform">ios</span>stickyHeaderIndices <span class="propType">[number]</span> <a class="hash-link" href="#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
|
||
top of the screen when scrolling. For example, passing
|
||
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
|
||
top of the scroll view. This property is not supported in conjunction
|
||
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale <span class="propType">number</span> <a class="hash-link" href="#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ScrollViewExample.js">Edit on GitHub</a></td></tr></tbody></table><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-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||
ScrollView<span class="token punctuation">,</span>
|
||
StyleSheet<span class="token punctuation">,</span>
|
||
Text<span class="token punctuation">,</span>
|
||
TouchableOpacity<span class="token punctuation">,</span>
|
||
View<span class="token punctuation">,</span>
|
||
Image
|
||
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
|
||
|
||
exports<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token punctuation">(</span>undefined<span class="token punctuation">:</span> <span class="token operator">?</span>string<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">'<ScrollView>'</span><span class="token punctuation">;</span>
|
||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Component that enables scrolling through child components'</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">'<ScrollView>'</span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token string">'To make content scrollable, wrap it within a <ScrollView> component'</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">var</span> _scrollView<span class="token punctuation">:</span> ScrollView<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View<span class="token operator">></span>
|
||
<ScrollView
|
||
ref<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>scrollView<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> _scrollView <span class="token operator">=</span> scrollView<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||
automaticallyAdjustContentInsets<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
|
||
onScroll<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">></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'onScroll!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||
scrollEventThrottle<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">200</span><span class="token punctuation">}</span>
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>scrollView<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token punctuation">{</span>THUMBS<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span>createThumbRow<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<<span class="token operator">/</span>ScrollView<span class="token operator">></span>
|
||
<TouchableOpacity
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<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">></span> <span class="token punctuation">{</span> _scrollView<span class="token punctuation">.</span><span class="token function">scrollTo<span class="token punctuation">(</span></span><span class="token punctuation">{</span>y<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 punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>Scroll to top<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>TouchableOpacity<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>
|
||
title<span class="token punctuation">:</span> <span class="token string">'<ScrollView> (horizontal = true)'</span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token string">'You can display <ScrollView>\'s child components horizontally rather than vertically'</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">var</span> _scrollView<span class="token punctuation">:</span> ScrollView<span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View<span class="token operator">></span>
|
||
<ScrollView
|
||
ref<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>scrollView<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> _scrollView <span class="token operator">=</span> scrollView<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||
automaticallyAdjustContentInsets<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
|
||
horizontal<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>scrollView<span class="token punctuation">,</span> styles<span class="token punctuation">.</span>horizontalScrollView<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<span class="token punctuation">{</span>THUMBS<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span>createThumbRow<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
<<span class="token operator">/</span>ScrollView<span class="token operator">></span>
|
||
<TouchableOpacity
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<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">></span> <span class="token punctuation">{</span> _scrollView<span class="token punctuation">.</span><span class="token function">scrollTo<span class="token punctuation">(</span></span><span class="token punctuation">{</span>x<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 punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>Scroll to start<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>TouchableOpacity<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 keyword">var</span> Thumb <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>
|
||
shouldComponentUpdate<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">,</span> nextState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token boolean">false</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>
|
||
<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">></span>
|
||
<Image style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>img<span class="token punctuation">}</span> source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>uri<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><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 keyword">var</span> THUMBS <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png'</span><span class="token punctuation">,</span> <span class="token string">'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
THUMBS <span class="token operator">=</span> THUMBS<span class="token punctuation">.</span><span class="token function">concat<span class="token punctuation">(</span></span>THUMBS<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true"> // double length of THUMBS
|
||
</span><span class="token keyword">var</span> createThumbRow <span class="token operator">=</span> <span class="token punctuation">(</span>uri<span class="token punctuation">,</span> i<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <Thumb key<span class="token operator">=</span><span class="token punctuation">{</span>i<span class="token punctuation">}</span> uri<span class="token operator">=</span><span class="token punctuation">{</span>uri<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></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>
|
||
scrollView<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#6A85B1'</span><span class="token punctuation">,</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
horizontalScrollView<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
containerPage<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||
width<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">'#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 punctuation">,</span>
|
||
text<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
color<span class="token punctuation">:</span> <span class="token string">'#888888'</span><span class="token punctuation">,</span>
|
||
left<span class="token punctuation">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
|
||
top<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">40</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>
|
||
margin<span class="token punctuation">:</span> <span class="token number">7</span><span class="token punctuation">,</span>
|
||
padding<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#eaeaea'</span><span class="token punctuation">,</span>
|
||
borderRadius<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>
|
||
buttonContents<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>
|
||
width<span class="token punctuation">:</span> <span class="token number">64</span><span class="token punctuation">,</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">64</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
img<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
width<span class="token punctuation">:</span> <span class="token number">64</span><span class="token punctuation">,</span>
|
||
height<span class="token punctuation">:</span> <span class="token number">64</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><div class="docs-prevnext"><a class="docs-next" href="docs/segmentedcontrolios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
||
ga('send', 'pageview');
|
||
|
||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
||
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
||
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script src="js/scripts.js"></script></body></html> |