美文网首页
react-native 的ScrollView

react-native 的ScrollView

作者: f48ac133a97f | 来源:发表于2017-09-28 10:34 被阅读0次

    最近在学rn,感觉还不错,尤其用法基本和前端一样,便于学习。这是我收藏的代码,仅供讨论。只不过刷新真他妈烦,,,有时候一直报错,还得多刷新几次。。

    import React, { Component } from 'react';

    import {  AppRegistry,  StyleSheet,  Text,    TextInput,  View,Image,    ScrollView} from 'react-native';

    var Dimensions = require('Dimensions');

    var screenWidth = Dimensions.get('window').width;

    var imageData = [    'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2263582212.jpg',    'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2265761240.jpg',    'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2266110047.jpg'];

    class ReactProjectTwo extends Component {    

    constructor(props) {        

    super(props);        

    this.state = {currentPage: 0};  

      }   

     render() {        

    return ({           

     this.onAnimationEnd(e)        }}    >     

       {this.renderImages()}{this.renderPagingIndicator()});    }    

    renderImages() {       

     let allImage = [];       

     for (let i = 0; i < imageData.length; i++) {           

     let item = imageData[i];           

     allImage.push(

    );        }       

     return allImage;    }   

     onAnimationEnd(e) {      

      let offsetX = e.nativeEvent.contentOffset.x;     

       let pageIndex = Math.floor(offsetX / screenWidth);        

    this.setState({currentPage: pageIndex});    }   

     renderPagingIndicator() {       

     let indicatorArr = [];      

      let style;        

    for (let i = 0; i < imageData.length; i++) {           

     style = (i == this.state.currentPage) ? {color: 'orange'} : {color: 'white'};            indicatorArr.push(•);        }      

      return indicatorArr; 

       }    }

    const styles = StyleSheet.create({    

    container: {       

    marginTop: 20,       

    backgroundColor: '#ffffff'    },  

      scrollViewStyle: {        backgroundColor: 'yellow',    },   

     imageStyle: {     

      width: screenWidth,       

    height:200, 

      },    

    pagingIndicatorStyle: {     

      height:25,       

    width:screenWidth,       

    backgroundColor:'rgba(0,0,0,0.4)', 

          position:'absolute',     

      bottom:0,       

    flexDirection:'row',     

      alignItems:'center',   

        justifyContent: 'center',    }});

    AppRegistry.registerComponent('ReactProjectTwo', () => ReactProjectTwo);

    转自:http://blog.csdn.net/xiangzhihong8/article/details/53709296

    相关文章

      网友评论

          本文标题:react-native 的ScrollView

          本文链接:https://www.haomeiwen.com/subject/sljmextx.html