status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Prettier ScrollViewExample 

Reviewed By: TheSavior, shergin

Differential Revision: D6712726

fbshipit-source-id: 30d8bcdcf6a1cbf1c05048462c7b8444b4ea5ede
This commit is contained in:
Spencer Ahrens 2018-01-12 19:07:17 -08:00 committed by Facebook Github Bot
parent 5c17db8352
commit b815eb59be
1 changed files with 87 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
RNTester/js/ScrollViewExample.js
View File

@ -8,6 +8,7 @@
* *
* @flow * @flow
* @providesModule ScrollViewExample * @providesModule ScrollViewExample
* @format
*/ */
'use strict'; 'use strict';
@ -20,90 +21,115 @@ var {
Text, Text,
TouchableOpacity, TouchableOpacity,
View, View,
Image Image,
} = ReactNative; } = ReactNative;
exports.displayName = 'ScrollViewExample'; exports.displayName = 'ScrollViewExample';
exports.title = '<ScrollView>'; exports.title = '<ScrollView>';
exports.description = 'Component that enables scrolling through child components'; exports.description =
'Component that enables scrolling through child components';
exports.examples = [ exports.examples = [
{ {
title: '<ScrollView>', title: '<ScrollView>',
description: 'To make content scrollable, wrap it within a <ScrollView> component', description:
render: function() { 'To make content scrollable, wrap it within a <ScrollView> component',
var _scrollView: ScrollView; render: function() {
return (
<View>
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
onScroll={() => { console.log('onScroll!'); }}
scrollEventThrottle={200}
style={styles.scrollView}>
{THUMB_URLS.map(createThumbRow)}
</ScrollView>
<TouchableOpacity
style={styles.button}
onPress={() => { _scrollView.scrollTo({y: 0}); }}>
<Text>Scroll to top</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => { _scrollView.scrollToEnd({animated: true}); }}>
<Text>Scroll to bottom</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => { _scrollView.flashScrollIndicators(); }}>
<Text>Flash scroll indicators</Text>
</TouchableOpacity>
</View>
);
}
}, {
title: '<ScrollView> (horizontal = true)',
description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
render: function() {
function renderScrollView(title: string, addtionalStyles: typeof StyleSheet) {
var _scrollView: ScrollView; var _scrollView: ScrollView;
return ( return (
<View style={addtionalStyles}> <View>
<Text style={styles.text}>{title}</Text>
<ScrollView <ScrollView
ref={(scrollView) => { _scrollView = scrollView; }} ref={scrollView => {
_scrollView = scrollView;
}}
automaticallyAdjustContentInsets={false} automaticallyAdjustContentInsets={false}
horizontal={true} onScroll={() => {
style={[styles.scrollView, styles.horizontalScrollView]}> console.log('onScroll!');
}}
scrollEventThrottle={200}
style={styles.scrollView}>
{THUMB_URLS.map(createThumbRow)} {THUMB_URLS.map(createThumbRow)}
</ScrollView> </ScrollView>
<TouchableOpacity <TouchableOpacity
style={styles.button} style={styles.button}
onPress={() => { _scrollView.scrollTo({x: 0}); }}> onPress={() => {
<Text>Scroll to start</Text> _scrollView.scrollTo({y: 0});
}}>
<Text>Scroll to top</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={styles.button} style={styles.button}
onPress={() => { _scrollView.scrollToEnd({animated: true}); }}> onPress={() => {
<Text>Scroll to end</Text> _scrollView.scrollToEnd({animated: true});
}}>
<Text>Scroll to bottom</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={styles.button} style={styles.button}
onPress={() => { _scrollView.flashScrollIndicators(); }}> onPress={() => {
_scrollView.flashScrollIndicators();
}}>
<Text>Flash scroll indicators</Text> <Text>Flash scroll indicators</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
); );
} },
},
{
title: '<ScrollView> (horizontal = true)',
description:
"You can display <ScrollView>'s child components horizontally rather than vertically",
render: function() {
function renderScrollView(
title: string,
addtionalStyles: typeof StyleSheet,
) {
var _scrollView: ScrollView;
return (
<View style={addtionalStyles}>
<Text style={styles.text}>{title}</Text>
<ScrollView
ref={scrollView => {
_scrollView = scrollView;
}}
automaticallyAdjustContentInsets={false}
horizontal={true}
style={[styles.scrollView, styles.horizontalScrollView]}>
{THUMB_URLS.map(createThumbRow)}
</ScrollView>
<TouchableOpacity
style={styles.button}
onPress={() => {
_scrollView.scrollTo({x: 0});
}}>
<Text>Scroll to start</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
_scrollView.scrollToEnd({animated: true});
}}>
<Text>Scroll to end</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
_scrollView.flashScrollIndicators();
}}>
<Text>Flash scroll indicators</Text>
</TouchableOpacity>
</View>
);
}
return ( return (
<View> <View>
{renderScrollView('LTR layout', {direction: 'ltr'})} {renderScrollView('LTR layout', {direction: 'ltr'})}
{renderScrollView('RTL layout', {direction: 'rtl'})} {renderScrollView('RTL layout', {direction: 'rtl'})}
</View> </View>
); );
} },
}]; },
];
class Thumb extends React.Component<$FlowFixMeProps, $FlowFixMeState> { class Thumb extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
@ -168,5 +194,5 @@ var styles = StyleSheet.create({
img: { img: {
width: 64, width: 64,
height: 64, height: 64,
} },
}); });