221 lines
4.2 KiB
Markdown
221 lines
4.2 KiB
Markdown
---
|
|
id: viewpagerandroid
|
|
title: ViewPagerAndroid
|
|
layout: docs
|
|
category: components
|
|
permalink: docs/viewpagerandroid.html
|
|
next: virtualizedlist
|
|
previous: view
|
|
---
|
|
Container that allows to flip left and right between child views. Each
|
|
child view of the `ViewPagerAndroid` will be treated as a separate page
|
|
and will be stretched to fill the `ViewPagerAndroid`.
|
|
|
|
It is important all children are `<View>`s and not composite components.
|
|
You can set style properties like `padding` or `backgroundColor` for each
|
|
child. It is also important that each child have a `key` prop.
|
|
|
|
Example:
|
|
|
|
```
|
|
render: function() {
|
|
return (
|
|
<ViewPagerAndroid
|
|
style={styles.viewPager}
|
|
initialPage={0}>
|
|
<View style={styles.pageStyle} key="1">
|
|
<Text>First page</Text>
|
|
</View>
|
|
<View style={styles.pageStyle} key="2">
|
|
<Text>Second page</Text>
|
|
</View>
|
|
</ViewPagerAndroid>
|
|
);
|
|
}
|
|
|
|
...
|
|
|
|
var styles = {
|
|
...
|
|
viewPager: {
|
|
flex: 1
|
|
},
|
|
pageStyle: {
|
|
alignItems: 'center',
|
|
padding: 20,
|
|
}
|
|
}
|
|
```
|
|
|
|
### Props
|
|
|
|
- [View props...](docs/view.html#props)
|
|
- [`initialPage`](docs/viewpagerandroid.html#initialpage)
|
|
- [`keyboardDismissMode`](docs/viewpagerandroid.html#keyboarddismissmode)
|
|
- [`onPageScroll`](docs/viewpagerandroid.html#onpagescroll)
|
|
- [`onPageScrollStateChanged`](docs/viewpagerandroid.html#onpagescrollstatechanged)
|
|
- [`onPageSelected`](docs/viewpagerandroid.html#onpageselected)
|
|
- [`pageMargin`](docs/viewpagerandroid.html#pagemargin)
|
|
- [`peekEnabled`](docs/viewpagerandroid.html#peekenabled)
|
|
- [`scrollEnabled`](docs/viewpagerandroid.html#scrollenabled)
|
|
|
|
|
|
|
|
|
|
### Type Definitions
|
|
|
|
- [`ViewPagerScrollState`](docs/viewpagerandroid.html#viewpagerscrollstate)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
# Reference
|
|
|
|
## Props
|
|
|
|
### `initialPage`
|
|
|
|
Index of initial page that should be selected. Use `setPage` method to
|
|
update the page, and `onPageSelected` to monitor page changes
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| number | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `keyboardDismissMode`
|
|
|
|
Determines whether the keyboard gets dismissed in response to a drag.
|
|
|
|
- 'none' (the default), drags do not dismiss the keyboard.
|
|
- 'on-drag', the keyboard is dismissed when a drag begins.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| enum('none', 'on-drag') | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `onPageScroll`
|
|
|
|
Executed when transitioning between pages (ether because of animation for the requested page change or when user is swiping/dragging between pages) The `event.nativeEvent` object for this callback will carry following data:
|
|
|
|
- position - index of first page from the left that is currently visible
|
|
- offset - value from range [0,1) describing stage between page transitions.
|
|
Value x means that (1 - x) fraction of the page at "position" index is visible, and x fraction of the next page is visible.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| function | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `onPageScrollStateChanged`
|
|
|
|
Function called when the page scrolling state has changed.
|
|
The page scrolling state can be in 3 states:
|
|
- idle, meaning there is no interaction with the page scroller happening at the time
|
|
- dragging, meaning there is currently an interaction with the page scroller
|
|
- settling, meaning that there was an interaction with the page scroller, and the
|
|
page scroller is now finishing it's closing or opening animation
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| function | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `onPageSelected`
|
|
|
|
This callback will be called once ViewPager finish navigating to selected page
|
|
(when user swipes between pages). The `event.nativeEvent` object passed to this
|
|
callback will have following fields:
|
|
- position - index of page that has been selected
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| function | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `pageMargin`
|
|
|
|
Blank space to show between pages. This is only visible while scrolling, pages are still
|
|
edge-to-edge.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| number | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `peekEnabled`
|
|
|
|
Whether enable showing peekFraction or not. If this is true, the preview of
|
|
last and next page will show in current screen. Defaults to false.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| bool | No |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `scrollEnabled`
|
|
|
|
When false, the content does not scroll.
|
|
The default value is true.
|
|
|
|
| Type | Required |
|
|
| - | - |
|
|
| bool | No |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Type Definitions
|
|
|
|
### ViewPagerScrollState
|
|
|
|
| Type |
|
|
| - |
|
|
| $Enum |
|
|
|
|
|
|
**Constants:**
|
|
|
|
| Value | Description |
|
|
| - | - |
|
|
| idle | |
|
|
| dragging | |
|
|
| settling | |
|
|
|
|
|
|
|
|
|