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 })
}
这样解决了反向轮播的问题,第一张图失去了平滑轮播的效果,期待官方进一步优化