React Native第三方react-native-swiper组件可以实现轮播功能，但是在开发安卓应用的时候，如果同时使用了react-navigation的TabNavigator导航，会出现swiper内容不显示的问题
查看了react-native-swiper的github，发现issue中不少人都遇到了这样的问题
issue：https://github.com/leecade/react-native-swiper/issues/389
最后查找资料发现，在安卓机下，如果用到了可滚动组件例如SectionList,ScrollView或者TabNavigator这种可滑动的组建，swiper都无法正确显示，
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, } from 'react-native'; import Swiper from 'react-native-swiper'; export class ImgSwiper extends Component { constructor(props) { super(props); this.state = { swiperShow:false, }; } componentDidMount(){ setTimeout(()=>{ this.setState({ swiperShow:true }); },0) } render() { if(this.state.swiperShow){ return( <Swiper style={styles.imgWrapper} height={200} showsButtons={true} autoplay={true} > <View style={styles.imgView}> <Image source={ require('../public/images/banner1.jpg')} style={styles.bannerImg} /> </View> <View style={styles.imgView}> <Image source={ require('../public/images/banner2.jpg')} style={styles.bannerImg} /> </View> <View style={styles.imgView}> <Image source={ require('../public/images/banner3.jpg')} style={styles.bannerImg} /> </View> <View style={styles.imgView}> <Image source={ require('../public/images/banner4.jpg')} style={styles.bannerImg} /> </View> </Swiper> ) }else { return ( <View style={{height:200}}> <Image source={ require('../public/images/banner1.jpg')} style={styles.bannerImg} /> </View> ); } } } const styles = StyleSheet.create({ imgWrapper: { width: '100%', height: 200, }, imgView: { flex: 1, height: 200, }, bannerImg: { width: '100%', height: 200, flex: 1 } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
将react navigation 中的tabBar 参数 swipeEnabled: false 和 animationEnabled: false, 都设置为false
React Native第三方react-native-swiper组件可以实现轮播功能，但是在开发安卓应用的时候，如果同时使用了react-navigation的TabNavigator导航，会出现swiper内容不显示的问题
查看了react-native-swiper的github，发现issue中不少人都遇到了这样的问题
issue：https://github.com/leecade/react-native-swiper/issues/389
最后查找资料发现，在安卓机下，如果用到了可滚动组件例如SectionList,ScrollView或者TabNavigator这种可滑动的组建，swiper都无法正确显示，
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, } from 'react-native'; import Swiper from 'react-native-swiper'; export class ImgSwiper extends Component { constructor(props) { super(props); this.state = { swiperShow:false, }; } componentDidMount(){ setTimeout(()=>{ this.setState({ swiperShow:true }); },0) } render() { if(this.state.swiperShow){ return( <Swiper style={styles.imgWrapper} height={200} showsButtons={true} autoplay={true} > <View style={styles.imgView}> <Image source={ require('../public/images/banner1.jpg')} style={styles.bannerImg} /> </View> <View style={styles.imgView}> <Image source={ require('../public/images/banner2.jpg')} style={styles.bannerImg} /> </View> <View style={styles.imgView}> <Image source={ require('../public/images/banner3.jpg')} style={styles.bannerImg} /> </View> <View style={styles.imgView}> <Image source={ require('../public/images/banner4.jpg')} style={styles.bannerImg} /> </View> </Swiper> ) }else { return ( <View style={{height:200}}> <Image source={ require('../public/images/banner1.jpg')} style={styles.bannerImg} /> </View> ); } } } const styles = StyleSheet.create({ imgWrapper: { width: '100%', height: 200, }, imgView: { flex: 1, height: 200, }, bannerImg: { width: '100%', height: 200, flex: 1 } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
将react navigation 中的tabBar 参数 swipeEnabled: false 和 animationEnabled: false, 都设置为false