React Native react-native-swiper 轮播图库

RN 项目 安装 react-native-swiper 轮播图库

#  1.5.14 版本
yarn add react-native-swiper

// package.json
{
  "name": "RNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "npx jetify"
  },
  "dependencies": {
    "@ant-design/react-native": "^3.1.9",
    "lodash": "^4.17.11",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-swiper": "^1.5.14",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "babel-plugin-import": "^1.12.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "jetifier": "^1.6.1",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

在android 环境下运行，因 ViewPagerAndroid 将被弃用，无法运行，官方建议安装 nightly版本

根据官方文档，安装 react-native-swiper nightly版本

# 1.6.0-nightly.2 版本
yarn add react-native-swiper@nightly

{
  "name": "RNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "npx jetify"
  },
  "dependencies": {
    "@ant-design/react-native": "^3.1.9",
    "lodash": "^4.17.11",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-swiper": "^1.6.0-nightly.2",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "babel-plugin-import": "^1.12.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "jetifier": "^1.6.1",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

在android 环境下运行，依然有 WARNING 提示，修改 node_modules/react-native-swiper/src/index 文件

• componentWillReceiveProps、componentWillUpdate 将被弃用，建议使用 UNSAFE_componentWillReceiveProps、UNSAFE_componentWillUpdate 替代

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!nextProps.autoplay && this.autoplayTimer)
      clearTimeout(this.autoplayTimer)
    if (nextProps.index === this.props.index) return
    this.setState(
      this.initState(nextProps, this.props.index !== nextProps.index)
    )
  }

  UNSAFE_componentWillUpdate(nextProps, nextState) {
    // If the index has changed, we notify the parent via the onIndexChanged callback
    if (this.state.index !== nextState.index)
      this.props.onIndexChanged(nextState.index)
  }

• 轮播图设置 autoplay 自动播放时，第二张图在循环一次后，由反方向轮播，在强迫症的趋势下分析源码。官方使用 ScrollView 替换了 ViewPagerAndroid， 感觉应该是 ScrollView 的问题，反复将平滑滚动动画 开启/关闭，定位到问题

// 源码
if (Platform.OS === 'android') {
  this.state.index === 0 && this.scrollView.scrollTo({ x: state.width, y: 0, animated: false })
  this.state.index === this.state.total - 1 && this.scrollView.scrollTo({x: state.width * this.state.total, animated: false })
}

// 修改后 将 this.state.index === 0 中的 animated删除 或 定义为 true 
if (Platform.OS === 'android') {
  this.state.index === 0 && this.scrollView.scrollTo({ x: state.width, y: 0, animated: true })
  this.state.index === this.state.total - 1 && this.scrollView.scrollTo({x: state.width * this.state.total, animated: false })
}

这样解决了反向轮播的问题，第一张图失去了平滑轮播的效果，期待官方进一步优化