react-native viewpager用法

用到的框架

react-native-community/viewpager

yarn add @react-native-community/viewpager

import React, {Component} from 'react';
import {Image, StyleSheet,TouchableOpacity, Text, View} from 'react-native';
import ViewPager from '@react-native-community/viewpager';
export default class ViewPagerAndroidPage extends Component {constructor(props) {super(props);this.state = {page: 0,};}onPageSelected = (e) => {this.setState({page: e.nativeEvent.position});};render() {let images = ['http://doc.zwwill.com/yanxuan/imgs/banner-1.jpg','http://doc.zwwill.com/yanxuan/imgs/banner-2.jpg','http://doc.zwwill.com/yanxuan/imgs/banner-3.jpg'];let pageViews = [];for (let i = 0; i < images.length; i++) {pageViews.push(<Imagestyle={styles.imageStyle}source={{uri: images[i]}}></Image>);}return (<View style={styles.container}><ViewPager style={styles.viewPagerStyle}onPageSelected={this.onPageSelected}>{pageViews}</ViewPager><Text style={styles.txtStyle}>当前第{this.state.page + 1}页</Text></View>);}
}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},imageStyle: {height: 180,padding: 20,},viewPagerStyle: {height: 180,},txtStyle: {flex: 1,textAlign: 'center',marginTop: 10},
});

react-native viewpager用法相关推荐

Facebook 开源安卓版 React Native，开发者可将相同代码用于网页和 iOS 应用开发
转自:http://mt.sohu.com/20150915/n421177212.shtml Facebook 创建了React Java 库,这样,Facebook 的工程团队就可以用相同的代码给 ...
【React Native】react-native-vector-icons用法避坑
在用React Native开发App时,icon的使用必不可少.官网推荐使用react-native-vector-icons来完成icon的使用. 在学习的过程中碰到了一个问题:一步一步按照官网说 ...
React Native之广告栏Banner实现
Banner广告栏效果在应用中相当的普遍,比如网易,搜狐等新闻客户端以及天猫,京东之类的商城,在Android原生开发中一般会用ViewPager.实现起来也相对容易,在这里我简单介绍下用React ...
初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
React Native常用组件之ListView
1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...
React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
React Native 0.50版本新功能简介
React Native在2017年经历了众多版本的迭代,从本人接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能 ...
iOS开发者React Native学习路线
2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...
从零学React Native之07View
View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始, ...
用react-service做状态管理，适用于react、react native
转载自:https://blog.csdn.net/wo_shi_ma_nong/article/details/100713151 . react-service是一个非常简单的用来在react.r ...

react-native viewpager用法

用到的框架

react-native-community/viewpager

react-native viewpager用法相关推荐

最新文章

热门文章