设为首页 加入收藏

TOP

React Native 之ScrollView轮播图实现(二)
2017-10-13 10:49:41 】 浏览:767
Tags:React Native ScrollView 实现
p; }  

3.主要的文件 scrollViewTop.js 文件 如下  具体注释中已写  直接上代码:

/** 
 * Sample React Native App 
 * https://github.com/facebook/react-native 
 * @flow 
 */  
  
import React, { Component } from 'react';  
import {  
  AppRegistry,  
  StyleSheet,  
  ScrollView,  
  Image,  
  Text,  
  View  
} from 'react-native';  
  
let Dimensions = require('Dimensions');  
let ScreenWidth = Dimensions.get('window').width;  
let ScreenHeight = Dimensions.get('window').height;  
  
import ImageData from "./BadgeData.json";   
  
export  default class scrollViewTop extends Component {  
    
  constructor(props) {  
    super(props);  
    this.state = { currentPage: 0 };  
  }  
  
  static defaultProps = {  
    duration: 1000,  
  }  
  
  componentDidMount() {  
    this._startTimer();  
  
  }  
  
  componentWillUnmount() {  
    // 如果存在this.timer,则使用clearTimeout清空。  
    // 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear  
    this.timer && clearTimeout(this.timer);  
  }  
  
  render() {  
    return (  
      <View style={styles.continer}>  
        <ScrollView  
          ref='scrollView'  
          //水平方向  
          horizontal={true}  
          //当值为true时显示滚动条  
          showsHorizontalScrollIndicator={false}  
          //当值为true时,滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上  
          pagingEnabled={true}  
          //滑动完一贞  
 &nb
首页 上一页 1 2 3 4 5 下一页 尾页 2/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇图片的懒加载问题 下一篇html锚点 点击跳转到页面指定位置

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目