RN 列表组件之一 ScrollView

RN 列表组件之一 ScrollView

滑动视图组件

// 常用的属性，不常用的到时候看源码
render(){
    <View style={{flex:1}}>
        <ScrollView 
            horizontal = 'true',  //默认为false 垂直滚动；true水平滚动
            showsHorizontalScrollIndicator = 'true', //水平滚动条
            showsVerticalScrollIndicator = 'false',  //垂直方向滚动条
            onContentSizeChange ={(contentWidth, contentHeight) = > {'滚动内容的视图发生变化时调用'}},
            refreshControl= 'true',
            refreshControl = {() => {}}
            pagingEnabled = 'true',   //开启分页功能

            ……          
        />
    </View>
}
// 制作一个轮播图
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var TimerMixin = require('react-timer-mixin');
……
constructor(props){
    super(props);
    this.state = {
        // 注册定时器
        mixins: [TimerMixin],
        duration: 2000,
        currentPage: 0
    }
}
// 视图绘制完毕之后会调用此方法
componentDidMount() {
// 自动轮播
    this.startTimer();
},
render() {
    return (
        <View style={styles.container}>
          <ScrollView  style={styles.scrollViewStyle}
                ref="scrollView"
                horizontal={true}
                pagingEnabled={true}
                showsHorizontalScrollIndicator={false} 
                onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)} //滑动一祯
                onScrollBeginDrag={this.onScrollBeginDrag}    //开始拖拽
                onScrollEndDrag={this.onScrollEndDrag}   //结束拖拽
          >
            {this.renderAllImages()}
          </ScrollView>
    <View style={styles.cycleStyle}>
    {this.renderAllCycle()}
  </View>
    </View>
  )
  },

  // 开启定时器
  startTimer() {
    // 拿到scrollView
    var scrollView = this.refs.scrollView;
    // 添加定时器
    this.timer = this.setInterval(function() {
          var tempPage;
          if (this.state.currentPage+1 >=7) {
             tempPage = 0;
          } else {
            tempPage = this.state.currentPage+1;
          }
          // 更新状态机
          this.setState( {
            currentPage: tempPage
          });
          // 改变scrollView的偏移量
          let offSet = tempPage * width;
          scrollView.scrollTo({x: offSet, y: 0, animated: true});
      }, this.state.duration);
    },
  // 当一帧滚动结束的时候会调用此方法
  onAnimationEnd(e) {
    // 获取偏移量
    let offset = e.nativeEvent.contentOffset.x;
    // 获取页码
    let page = Math.floor(offset / width);
    // 更新状态机,重新绘制UI
    this.setState({
      currentPage: page
    });
  },
  onScrollBeginDrag() {
    // 清除定时器
    this.clearInterval(this.timer);
  },
  onScrollEndDrag() {
    // 重新开启定时器
    this.startTimer();
  },
  // 返回所有图片
  renderAllImages() {
        var imageItems = [];
        var imageNames = ['1.jpg', '2.jpg', '3.jpg', '4.jpg','5.jpg', '6.jpg', '7.jpg'];
        var colors = ['red', 'blue', 'green', 'purple', 'brown', 'black', 'yellow'];
        for (var i=0; i<7; i++) {
          // 将Image装入数组中
          imageItems.push(
          <Image key={i}
          source={{uri: imageNames[i]}}
          style={{backgroundColor: colors[i], width: width, height: 300}} />
        );}
      // 返回所有Image
      return imageItems;
  },
  // 设置小圆点
  renderAllCycle() {
     var cycleItems = [];
     var colorStyle;
     for (var i=0; i<7; i++) {
       colorStyle = (i==this.state.currentPage) ? {color: 'gray'} : {color: 'white'}
      cycleItems.push(
      <Text key={i} style={[{fontSize: 30, left: 10}, colorStyle]}>&bull;</Text>)
    }
    return cycleItems;
  }
  })

// 设置样式
const styles = StyleSheet.create({
  container: {
    width: width,
    height: 300,
    backgroundColor: 'green',
  },
  scrollViewStyle: {
    backgroundColor: 'yellow',
    width:width,
    marginTop: 20
  },
  cycleStyle: {
    backgroundColor: 'rgba(241,241,241,0.5)',
    width: width,
    height: 30,
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    alignItems: 'center'
  }
});