解决react-native-swiper在安卓上与react navigation TabNavigator一起用时不显示内容问题

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都无法正确显示,

解决办法一:

解决办法是设置setTimeout。

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(
                200} 
                    showsButtons={true} autoplay={true}
                >
                    
                        require('../public/images/banner1.jpg')} style={styles.bannerImg} />
                    
                    
                        require('../public/images/banner2.jpg')} style={styles.bannerImg} />
                    
                    
                        require('../public/images/banner3.jpg')} style={styles.bannerImg} />
                    
                    
                        require('../public/images/banner4.jpg')} style={styles.bannerImg} />
                           
                
            )
        }else {
            return (
                200}}>
                        require('../public/images/banner1.jpg')} style={styles.bannerImg} />
                
            );
        }
    }
}

const styles = StyleSheet.create({
    imgWrapper: {
        width: '100%',
        height: 200,
    },
    imgView: {
        flex: 1,
        height: 200,
    },
    bannerImg: {
        width: '100%',
        height: 200,
        flex: 1
    }
})

解决办法二:

将react navigation 中的tabBar 参数 swipeEnabled: false 和 animationEnabled: false, 都设置为false

你可能感兴趣的:(React,Native)