react-native实现banner轮播

本文介绍RN如何实现banner的轮播效果。
下面直接贴代码

render () {
    return (
      <View style={styles.container}>
        <ScrollView 
        ref={(scroll)=>this.ScrollView=scroll}
        style={styles.scrollStyle} 
        horizontal={true} 
        pagingEnabled={true} 
        showsHorizontalScrollIndicator={true} 
        maximumZoomScale={2.0} 
        minimumZoomScale={0.5}
        onMomentumScrollEnd={(e)=>{this.onAnimationEnd(e)}}
        >
        {/*this.renderImages()*/}
        {/* {IMAGES.map(this.renderImages2)} */}
        <View style={[styles.viewStyle, {width:this.state.frame_width}]}>
          {/* <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[0]}}>
          </Image>
          <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[1]}}>
          </Image>
          <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[2]}}>
          </Image>
          <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[3]}}>
          </Image> */}

          {this.state.imageUrl.map(this.renderImages3)}

        </View>

        </ScrollView>

        {/* <TouchableOpacity 
        onPress={()=>{this.onPressAction()}} disabled={this.state.useAble}>
          <View ref={(button)=>this.ScrollButton=button} style={{height:40, backgroundColor:'red'}}>
            <Text style={{padding:10, color:'white', fontSize:15, textAlign:'center'}}>滚动</Text>
          </View>
        </TouchableOpacity> */}
        <View style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}>
          <TouchableOpacity onPress={()=>{this.onPressAction()}} disabled='false'/*{this.state.useAble}*/ ref={(button)=>this.ScrollButton=button} style={styles.buttonStyle}>
              <Text style={styles.textStyle}>滚动</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.buttonStyle} disabled={this.state.useAble} ref={(button)=>this.getButton=button} onPress={()=>{this.getSource()}}>
              <Text style={styles.textStyle}>获取</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

ScrollView里面的一些属性就不一一介绍了，onMomentumScrollEnd是滚动结束后调用的函数，View的样式等一下再介绍。

{/* <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[0]}}>
          </Image>
          <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[1]}}>
          </Image>
          <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[2]}}>
          </Image>
          <Image style={styles.itemStyle} ref={(image)=>this.scrollImage=image} source={{uri: this.state.imageUrl[3]}}>
          </Image> */}

          {this.state.imageUrl.map(this.renderImages3)}

这里面Image我开始用的上面那套注释掉的愚蠢的方法去渲染，发现渲染出来的Image很模糊，我也不知道是什么原因（高手路过还请指点一二）。

<TouchableOpacity style={styles.buttonStyle} disabled={this.state.useAble} ref={(button)=>this.getButton=button} onPress={()=>{this.getSource()}}>
              <Text style={styles.textStyle}>获取</Text>
          </TouchableOpacity>

这里的按钮是用来获取图片资源以及开启定时器的地方。
下面贴上调用的函数

onAnimationEnd(e) {
    
    this.setState({useAble:false});
    contentOffsetX = e.nativeEvent.contentOffset.x;
    contentOffsetY = e.nativeEvent.contentOffset.y;
  }

  onPressAction() {

    this.setState({useAble:true});
    var x,y;
    if (contentOffsetX == (this.state.imageUrl.length - 1)*width) {
      this.ScrollView.scrollTo({x:0});
    } else {
      this.ScrollView.scrollTo({x:contentOffsetX+width});
    }
  }

  getSource () {

    // this.setState({useAble:true});

    fetch("http://jandan.net/?oxwlxojflwblxbsapi=jandan.get_ooxx_comments&page=1",{
    }).then((response) => response.json())
    .then((responseJson) => {
      
      this.setState({useAble:false});
      // var imagesarray = responseJson.comments[0].pics;
      var imageContent = [];
      for (let i = 0; i < responseJson.comments.length; i++) {
        
        imageContent.push(responseJson.comments[i].pics[0]);
      }
      
      console.log(imageContent);
      this.setState({frame_width:responseJson.comments.length*width, useAble:true, imageUrl:imageContent});
      // this.setState({imageUrl:imageContent})

      this._after = setTimeout(() => {
        
        this._time = setInterval(() => {

          this._index ++;
          console.log(this._index);

          {this.onPressAction()};

        },5000);

      }, 5000);

    })
    .catch ((error) => {
      console.log(error);
    });
  }

  renderImages3 = (i) => {

    return <Image key={i} source={{uri: i}} style={styles.itemStyle} />
  }
}

onAnimationEnd函数是在ScrollView滚动停止后用来获取当前偏移量的方法。
getSource当然是用来获取资源的方法。fetch默认使用GET请求，因为这里只是取数据，所以使用了默认方法，至于如何设置请求头和请求体这里也不做说明，response.json返回的数据为json。

this.setState({frame_width:responseJson.comments.length*width, useAble:true, imageUrl:imageContent});

这里同时更新了frame_width、imageUrl这两个状态，frame_width就是前面提到的动态修改View的style，imageUrl提供图片资源。

this._after = setTimeout(() => {
        
        this._time = setInterval(() => {

          this._index ++;
          console.log(this._index);

          {this.onPressAction()};

        },5000);

      }, 5000);

这里的两个定时器，外面的定时器是获取到资源后延时5s调用里面的循环定时器，间隔5s。
onPressAction就是实现图片滚动效果的方法。当图片滚动到最后一张的时候，下一次滚动跳转至第一张。
刚看RN两周，自己写的代码质量不高，大佬路过还望指点一二。😁