leecade / react-native-swiper

The best Swiper component for React Native.
MIT License
10.37k stars 2.35k forks source link

Image cannot show when used with Flatlist as ListHeaderComponent #614

Open wenrisheng opened 6 years ago

wenrisheng commented 6 years ago

Which OS ?

It cannot show image in Android , but ios is not problem

Version

Which versions are you using:

"react-native-swiper": "1.5.13", "react": "16.0.0-beta.5", "react-native": "0.49.3",

In my app,used TabNavigator: const Tabs = TabNavigator({ HomeModuleCMPT: { screen: HomeModuleCMPT, navigationOptions: {
tabBarLabel: 'Home', tabBarIcon: ({tintColor}) => (<Image source={require('./../../../resource/mainModule/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),

            }
        },

in the HomeModuleCMPT, use FlatList: <FlatList ref={(flatList)=>this.flatList=flatList} renderItem={this._renderItem} keyExtractor={this._keyExtractor} data={data} ListHeaderComponent={this._header} getItemLayout={(data,index)=>( {length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+2) * index, index} )} _header = () => { return <Swiper horizontal = {true} showsPagination={false} loadMinimal loadMinimalSize={1} loop={true} autoplay={this.props.autoplay} style={styles.swiper} height={styles.swiper.height} autoplayTimeout={2} dot={} activeDot={}

{ this.state.slideList.map((item, i) => this.renderItem(item, i) ) } ; } renderItem(item, i) { return ( <TouchableOpacity style={styles.imageWrap} activeOpacity={0.5} onPress={()=>this.onPress(i)} key={i}> <CustomCachedImage component={Image} indicator={Progress.Bar} style={styles.image} source={{uri: item.image}}/> ) }

adamnator92 commented 6 years ago

@wenrisheng i think your issues not cause by Flatlist, did u try without Flatlist? i having a same issue with #609