React Native react-native-swiper 轮播图库

傷城~ 2021-12-10 17:41 285阅读 0赞

> 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**版本

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]

> 根据官方文档，安装 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 })
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 3]  
这样解决了反向轮播的问题，第一张图失去了平滑轮播的效果，期待官方进一步优化

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20211210/f3853b79ef724a809f36d198edc5bd03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: /images/20211210/077308b84dfe4c2ab1447b11991625ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]: /images/20211210/d03e7db12dd04b768e0273171fea84b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 3]: /images/20211210/64d0c6cc14e84162903fab7954aabc8d.png