mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-13 09:21:46 +08:00
Add scrollToEnd to ScrollView and ListView
Summary: **Motivation** A basic task of making a React Native ScrollView or ListView scroll to the bottom is currently very hard to accomplish: - https://github.com/facebook/react-native/issues/8003 - https://github.com/facebook/react-native/issues/913 - http://stackoverflow.com/questions/29829375/how-to-scroll-to-bottom-in-react-native-listview **NOTE:** If you're building something like a chat app where you want a ListView to keep scrolling to the bottom at all times, it's easiest to use the [react-native-invertible-scrollview](https://github.com/exponent/react-native-invertible-scroll-view) component rather calling `scrollToEnd` manually when layout changes. The invertible-scrollview uses a clever trick to invert the direction of the ScrollView. This pull request adds a `scrollToEnd` method which scrolls to the bottom if the ScrollView is vertical, to the right if the ScrollView is horizontal. The implementation is based on this SO answer: http://stackoverflow.com/questions/952412/uiscrollview-scrol Closes https://github.com/facebook/react-native/pull/12088 Differential Revision: D4474974 Pulled By: mkonicek fbshipit-source-id: 6ecf8b3435f47dd3a31e2fd5be6859062711c233
This commit is contained in:
committed by
Facebook Github Bot
parent
81fe1a3618
commit
9dee696ed8
@@ -57,6 +57,11 @@ exports.examples = [
|
||||
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>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -79,6 +84,11 @@ exports.examples = [
|
||||
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>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user