mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-03-29 00:38:18 +08:00
[add] initial ScrollView
Supports the following props: `children`, `contentContainerStyle`, `horizontal`, `onScroll`, `scrollEnabled`, `scrollEventThrottle`, and `style`. Fix #6
This commit is contained in:
committed by
Nicolas Gallagher
parent
a1664927ce
commit
894fd0362d
@@ -1,6 +1,7 @@
|
||||
# ScrollView
|
||||
|
||||
TODO
|
||||
Scrollable `View` for use with bounded height, either by setting the height of
|
||||
the view directly (discouraged) or by bounding the height of ancestor views.
|
||||
|
||||
## Props
|
||||
|
||||
@@ -11,27 +12,29 @@ Child content.
|
||||
**contentContainerStyle**: style
|
||||
|
||||
These styles will be applied to the scroll view content container which wraps
|
||||
all of the child views. Example:
|
||||
all of the child views.
|
||||
|
||||
**horizontal**: bool = false
|
||||
|
||||
When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column. Default: `false`.
|
||||
When true, the scroll view's children are arranged horizontally in a row
|
||||
instead of vertically in a column.
|
||||
|
||||
**onScroll**: function
|
||||
|
||||
Fires at most once per frame during scrolling. The frequency of the events can be contolled using the `scrollEventThrottle` prop.
|
||||
Fires at most once per frame during scrolling. The frequency of the events can
|
||||
be contolled using the `scrollEventThrottle` prop.
|
||||
|
||||
**scrollEnabled**: bool
|
||||
**scrollEnabled**: bool = true
|
||||
|
||||
When false, the content does not scroll. Default: `true`.
|
||||
When false, the content does not scroll.
|
||||
|
||||
**scrollEventThrottle**: number
|
||||
**scrollEventThrottle**: number = 0
|
||||
|
||||
This controls how often the scroll event will be fired while scrolling (in
|
||||
events per seconds). A higher number yields better accuracy for code that is
|
||||
tracking the scroll position, but can lead to scroll performance problems.
|
||||
Default: `0` (the scroll event will be sent only once each time the view is
|
||||
scrolled.)
|
||||
tracking the scroll position, but can lead to scroll performance problems. The
|
||||
default value is `0`, which means the scroll event will be sent only once each
|
||||
time the view is scrolled.
|
||||
|
||||
**style**: style
|
||||
|
||||
@@ -40,20 +43,42 @@ scrolled.)
|
||||
## Examples
|
||||
|
||||
```js
|
||||
import React, { ScrollView } from 'react-native-web'
|
||||
import React, { ScrollView, StyleSheet } from 'react-native-web'
|
||||
|
||||
const { Component, PropTypes } = React;
|
||||
import Item from './Item'
|
||||
|
||||
class Example extends Component {
|
||||
static propTypes = {
|
||||
export default class App extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
items: Array.from({ length: 20 }).map((_, i) => ({ id: i }))
|
||||
}
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
onScroll(e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ScrollView
|
||||
children={this.state.items.map((item) => <Item {...item} />)}
|
||||
contentContainerStyle={styles.container}
|
||||
horizontal
|
||||
onScroll={(e) => this.onScroll(e)}
|
||||
scrollEventThrottle={60}
|
||||
style={styles.root}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
borderWidth: '1px'
|
||||
},
|
||||
container: {
|
||||
padding: '10px'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user