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

Deploy website

Browse Source 
Deploy website version based on 3a832c763c
This commit is contained in:
Website Deployment Script committed 2018-07-27 22:37:15 +00:00
1 parent 3a832c763c
commit d71c6056c4
106 files changed
+2714 -2724
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/0.10/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.10/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.10/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.10/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.11/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.11/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.11/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.11/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.12/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.12/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.12/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.12/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.13/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.13/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.13/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.13/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.14/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.14/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.14/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.14/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.15/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.15/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.15/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.15/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.16/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.16/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.16/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.16/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.17/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.17/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.17/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.17/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.18/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.18/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.18/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.18/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.19/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.19/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.19/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.19/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.20/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.20/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.20/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.20/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.21/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.21/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.21/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.21/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.22/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.22/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.22/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.22/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.23/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.23/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.23/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.23/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.24/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.24/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.24/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.24/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.25/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.25/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.25/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.25/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.26/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.26/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.26/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.26/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.27/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.27/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.27/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.27/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.28/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.28/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.28/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.28/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.29/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.29/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.29/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.29/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.30/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.30/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.30/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.30/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.31/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.31/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.31/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.31/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.32/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.32/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.32/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.32/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.33/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.33/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.33/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.33/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.34/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.34/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.34/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.34/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.35/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.35/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.35/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.35/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.36/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.36/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.36/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.36/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.37/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.37/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.37/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.37/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.38/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.38/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.38/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.38/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.39/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.39/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.39/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.39/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.40/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.40/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.40/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.40/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.41/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.41/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.41/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.41/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.42/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.42/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.42/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.42/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.43/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.43/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.43/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.43/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.44/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.44/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.44/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.44/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.45/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.45/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.45/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.45/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.46/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.46/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.46/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.46/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.47/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.47/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.47/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.47/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.48/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.48/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.48/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.48/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.49/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.49/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.49/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.49/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.5/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.5/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.5/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.5/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.50/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.50/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.50/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.50/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.51/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.51/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.51/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.51/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.52/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.52/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.52/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.52/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.53/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.53/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.53/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.53/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.54/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.54/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.54/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.54/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.55/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.55/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.55/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.55/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.6/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.6/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.6/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.6/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.7/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.7/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.7/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.7/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.8/using-a-scrollview.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.8/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
docs/0.8/using-a-scrollview/index.html
+26 -26
View File
@@ -39,35 +39,35 @@
<span class="hljs-keyword">return</span> (
&lt;ScrollView&gt;
&lt;Text style={{fontSize:96}}&gt;Scroll me plz&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;If you like&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Scrolling down&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;What's the best&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:96}}&gt;Framework around?&lt;/Text&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={require('/react-native/img/favicon.png')} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Image source={{uri: "http://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} /&gt;
&lt;Text style={{fontSize:80}}&gt;React Native&lt;/Text&gt;
&lt;/ScrollView&gt;
);
@@ -78,7 +78,7 @@
AppRegistry.registerComponent(
'AwesomeProject',
() =&gt; IScrolledDownAndWhatHappenedNextShockedMe);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('%2Freact-native%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A80%7D%7D%3EReact%20Native%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'AwesomeProject'%2C%0A%20%20()%20%3D%3E%20IScrolledDownAndWhatHappenedNextShockedMe)%3B%0A" frame-border="0"></iframe></div>
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20IScrolledDownAndWhatHappenedNextShockedMe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%3CScrollView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EIf%20you%20like%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EScrolling%20down%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%7Buri%3A%20%22http%3A%2F%2Ffacebook.github.io%2Freact-native%2Fimg%2Ffavicon.png%22%2C%20width%3A%2064%2C%20height%3A%2064%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EFramework%20around%3F%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7B%Line truncated
<p>ScrollViews can be configured to allow paging through views using swiping gestures by using the <code>pagingEnabled</code> props. Swiping horizontally between views can also be implemented on Android using the <a href="/react-native/docs/0.8/viewpagerandroid">ViewPagerAndroid</a> component.</p>
<p>A ScrollView with a single item can be used to allow the user to zoom content. Set up the <code>maximumZoomScale</code> and <code>minimumZoomScale</code> props and your user will be able to use pinch and expand gestures to zoom in and out.</p>
Loaded 100 of 106 files, more files were not shown because too many files have changed in this diff. Show more