leecade / react-native-swiper

The best Swiper component for React Native.
MIT License
10.42k stars 2.34k forks source link

图片无法渲染 #421

Closed StarOfLife closed 7 years ago

StarOfLife commented 7 years ago

在同时使用 TabNavigator 和swiper的时候,第一屏的图片无法显示出来。 IndexView 代码如下

import React,{ Component} from 'react';
import {View,Image,StyleSheet,ScrollView,Dimensions} from 'react-native';
import Swiper from 'react-native-swiper';
const screen={
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height
}
export default class IndexView extends Component{
    render(){
        return (
            <View style={styles.container}>
                <ScrollView style={styles.scrollwrap}>
                    <Swiper style={styles.wrapper} autoplay={true} autoplayTimeout={4} height={screen.width/2} paginationStyle={{bottom:5}} dotColor={'rgba(255,255,255,0.8)'} activeDotColor={'rgba(234,56,62,0.8)'}>
                         <Image source={require('../imgs/banner/banner01.jpg')} style={styles.slider} />
                         <Image source={require('../imgs/banner/banner01.jpg')} style={styles.slider} />
                    </Swiper>
                </ScrollView>
            </View>
        )
    }
}

const styles=StyleSheet.create({
    container:{
        flex:1,
    },
    scrollwrap:{
        backgroundColor:'#f3f3f3',
    },
    wrapper:{
    },
    slider:{
        backgroundColor:'#97cae5',
        width:screen.width,
        height:screen.width/2,
    },
}) 

navigation代码如下

import React, { Component } from 'react';
import {Image,StyleSheet,Text } from 'react-native';

import IndexView from './index/index';
import SplashScreen from 'react-native-splash-screen';

import {StackNavigator ,TabNavigator} from 'react-navigation';
import TabBarItem from './TabBarItem';

const Tab= TabNavigator({
    Home:{
        screen:IndexView,
        navigationOptions:({navigation})=>({
             tabBarLabel: 'Home',
    },
    Sub:{
        screen:IndexView,
        navigationOptions:({navigation})=>({
             tabBarLabel: 'Sub',
    },
},{
    tabBarPosition:'bottom',
    lazy: true,
    tabBarOptions:{
        activeTintColor: '#ea383e', // 文字和图片选中颜色
        inactiveTintColor: '#555',
        style: { backgroundColor: '#f5f5f5', height:49},
        showLabel:true,
        showIcon:true,
        labelStyle:{
            fontSize:12,
            margin:0,
        },
        indicatorStyle:{
            height:0
        },
        upperCaseLabel:false,
    },
    initialRouteName:'Sub'
})
const Navigator =StackNavigator({
    Tab: { 
        screen: Tab,
    },
},{
    navigationOptions:{
        header:null,
    }
})

AlphaDu commented 7 years ago

你好,请问如何解决的?

StarOfLife commented 7 years ago

@AlphaDu ##是使用了一个定时器,参考 #389