React Native Android 独有组件 ViewPa

一个允许在子视图之间左右翻页的容器。每一个 ViewPagerAndroid 的子容器会被视作一个单独的页，并且会被拉伸填满 ViewPagerAndroid。

属性

名称	类型	必填	说明
initialPage	number	否	初始选中的页的下标。
keyboardDismissMode	enum('none', 'on-drag')	否	决定在滑动的时候是否要让软键盘消失。
onPageScroll	function	否	当在页间切换时（不论是由于动画还是由于用户在页间滑动/拖拽）执行。
onPageScrollStateChanged	function	否	页面滑动状态变化时调用此回调函数。
onPageSelected	function	否	这个回调会在页面切换完成后（当用户在页面间滑动）调用。
pageMargin	number	否	页面滑动时两个页面之间的间距。
peekEnabled	bool	否	是否在当前页滑动时展示前一页或者后一页，默认为 false
scrollEnabled	bool	否	设为 false 时可禁止滚动。默认值为 true

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  ViewPagerAndroid,
  TouchableOpacity,
  Image,
  View,
  Text
} from 'react-native';

var PAGES = 2;
var IMAGES = [
  'http://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg',
  'http://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg',
];

export default class App extends Component {
  constructor(props) { 
    super(props);
    this.state = {
      page:0
    }
  }
  render() {
    var pages = [];
    for (let i = 0; i < PAGES; i++) { 
      pages.push(
        <View key={i} collapsable={false}>
          <TouchableOpacity
            activeOpacity={1}
            onPress={this.onPress}
          >
            <Image
              style={styles.image}
              source={{ uri: IMAGES[i] }} />
          </TouchableOpacity>
        </View>
      );
    }
    return (
    
        <View style={styles.container}>
            
        <ViewPagerAndroid
          initialPage={0}
          onPageSelected={
            this.onPageSelected
          }
        >{pages}</ViewPagerAndroid>

        <Text style= {styles.text}>当前第{this.state.page + 1}页</Text>
          
        </View>
    )
  }

  onPageSelected = (e) => {
    this.setState({ page: e.nativeEvent.position });
  }
  onPress = () => {
    alert('第' + (this.state.page + 1) + '页被点击了');
  }

  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'white'
  },
  image: {
    height: 200,
    padding:20
  },
  viewPager: {
    flex:1
  },
  text: {
    alignSelf: 'center',
    flex:1
  }

});

2. 效果图

ViewPagerAndroid.gif