mirror of
https://github.com/status-im/react-native.git
synced 2025-02-26 16:10:58 +00:00
Prettier ScrollViewExample
Reviewed By: TheSavior, shergin Differential Revision: D6712726 fbshipit-source-id: 30d8bcdcf6a1cbf1c05048462c7b8444b4ea5ede
This commit is contained in:
parent
5c17db8352
commit
b815eb59be
@ -8,6 +8,7 @@
|
|||||||
*
|
*
|
||||||
* @flow
|
* @flow
|
||||||
* @providesModule ScrollViewExample
|
* @providesModule ScrollViewExample
|
||||||
|
* @format
|
||||||
*/
|
*/
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
@ -20,58 +21,76 @@ 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:
|
||||||
|
'To make content scrollable, wrap it within a <ScrollView> component',
|
||||||
render: function() {
|
render: function() {
|
||||||
var _scrollView: ScrollView;
|
var _scrollView: ScrollView;
|
||||||
return (
|
return (
|
||||||
<View>
|
<View>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
ref={(scrollView) => { _scrollView = scrollView; }}
|
ref={scrollView => {
|
||||||
|
_scrollView = scrollView;
|
||||||
|
}}
|
||||||
automaticallyAdjustContentInsets={false}
|
automaticallyAdjustContentInsets={false}
|
||||||
onScroll={() => { console.log('onScroll!'); }}
|
onScroll={() => {
|
||||||
|
console.log('onScroll!');
|
||||||
|
}}
|
||||||
scrollEventThrottle={200}
|
scrollEventThrottle={200}
|
||||||
style={styles.scrollView}>
|
style={styles.scrollView}>
|
||||||
{THUMB_URLS.map(createThumbRow)}
|
{THUMB_URLS.map(createThumbRow)}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.button}
|
style={styles.button}
|
||||||
onPress={() => { _scrollView.scrollTo({y: 0}); }}>
|
onPress={() => {
|
||||||
|
_scrollView.scrollTo({y: 0});
|
||||||
|
}}>
|
||||||
<Text>Scroll to top</Text>
|
<Text>Scroll to top</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.button}
|
style={styles.button}
|
||||||
onPress={() => { _scrollView.scrollToEnd({animated: true}); }}>
|
onPress={() => {
|
||||||
|
_scrollView.scrollToEnd({animated: true});
|
||||||
|
}}>
|
||||||
<Text>Scroll to bottom</Text>
|
<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)',
|
title: '<ScrollView> (horizontal = true)',
|
||||||
description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
|
description:
|
||||||
|
"You can display <ScrollView>'s child components horizontally rather than vertically",
|
||||||
render: function() {
|
render: function() {
|
||||||
|
function renderScrollView(
|
||||||
function renderScrollView(title: string, addtionalStyles: typeof StyleSheet) {
|
title: string,
|
||||||
|
addtionalStyles: typeof StyleSheet,
|
||||||
|
) {
|
||||||
var _scrollView: ScrollView;
|
var _scrollView: ScrollView;
|
||||||
return (
|
return (
|
||||||
<View style={addtionalStyles}>
|
<View style={addtionalStyles}>
|
||||||
<Text style={styles.text}>{title}</Text>
|
<Text style={styles.text}>{title}</Text>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
ref={(scrollView) => { _scrollView = scrollView; }}
|
ref={scrollView => {
|
||||||
|
_scrollView = scrollView;
|
||||||
|
}}
|
||||||
automaticallyAdjustContentInsets={false}
|
automaticallyAdjustContentInsets={false}
|
||||||
horizontal={true}
|
horizontal={true}
|
||||||
style={[styles.scrollView, styles.horizontalScrollView]}>
|
style={[styles.scrollView, styles.horizontalScrollView]}>
|
||||||
@ -79,17 +98,23 @@ exports.examples = [
|
|||||||
</ScrollView>
|
</ScrollView>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.button}
|
style={styles.button}
|
||||||
onPress={() => { _scrollView.scrollTo({x: 0}); }}>
|
onPress={() => {
|
||||||
|
_scrollView.scrollTo({x: 0});
|
||||||
|
}}>
|
||||||
<Text>Scroll to start</Text>
|
<Text>Scroll to start</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={styles.button}
|
style={styles.button}
|
||||||
onPress={() => { _scrollView.scrollToEnd({animated: true}); }}>
|
onPress={() => {
|
||||||
|
_scrollView.scrollToEnd({animated: true});
|
||||||
|
}}>
|
||||||
<Text>Scroll to end</Text>
|
<Text>Scroll to end</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>
|
||||||
@ -102,8 +127,9 @@ exports.examples = [
|
|||||||
{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,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user