ReactNative 基础 - 13 （FlatList横向滚动，实现轮播）

horizontal：横向排列

pagingEnabled：按页滚动

export default class App extends Component {
  banners = [
    'http://www...1.png',
    'http://www...2.png',
    'http://www...3.png',
    'http://www...4.png',
  ];
  current = 0;
  componentDidMount() {
    //利用定时器，实现自动滚动，注意不要开启debug模式
    setInterval(() => {
      this.current++;
      if (this.current == this.banners.length) this.current = 0;
      this.f1.scrollToIndex({index: this.current});
    }, 2000);
  }
  render() {
    return (
      <View>
        <FlatList
          data={this.banners}
          keyExtractor={(item, index) => index}
          renderItem={this._renderItem}
          horizontal
          pagingEnabled
          onScroll={this._onScroll}
          ref={el => (this.f1 = el)}></FlatList>
      </View>
    );
  }
  _renderItem = ({item}) => (
    <Image source={{uri: item}} style={{width: rpx(750), height: rpx(400)}} />
  );
  _onScroll = e => {
    e.persist();
    //滚动过程中存在偏移量，需要修复
    const offset_x = e.nativeEvent.contentOffset.x;
    const w = e.nativeEvent.layoutMeasurement.width;
    //偏移量x/屏幕宽w，计算出当前页数，四舍五入
    this.current = Math.round(offset_x / w);
  };
}