kfiroo / react-native-cached-image

CachedImage component for react-native
MIT License
938 stars 470 forks source link

not issue: I don't know how use the compnent #106

Open reybluk opened 6 years ago

reybluk commented 6 years ago

Sorry but I don't know how could I use this component. The installation is ok... but I don't see image.

I read data from a json file. in this I have some urls. then I use a map to see image and other information in my app. the code is this and it works very well and I see the images (item.imageSrcs[0].source is for example: 'http://www.frisbeerob.com/wp-content/uploads/2015/11/wl_fastbackgrn__93154.1379453528.500.659.jpg'):

{parsedData.map(item =>
                        <TouchableOpacity style={styles.element}
                                          onPress={ () => this.closePress(parsedData.indexOf(item))}>
                            <Image
                                source={{
                                    uri: item.imageSrcs[0].source
                                }}
                                style={styles.image}
                            >
                                <View style={styles.titleBar}>
                                    <Text style={styles.title}>{item.title}</Text>
                                </View>
                            </Image>
                            <View style={styles.titleBar}>
                                <Text numberOfLines={2} style={styles.text}>
                                    {item.description}
                                </Text>
                            </View>
                            <View style={{height: 10}}/>

                        </TouchableOpacity>
                    )}

then I try to substitute the image component in the code because I want use the image in offline too... in this way...

{parsedData.map(item =>
                        <TouchableOpacity style={styles.element}
                                          onPress={ () => this.closePress(parsedData.indexOf(item))}>
                            <ImageCacheProvider
                                urlsToPreload={[item.imageSrcs[0].source]}
                                onPreloadComplete={() => ReactNative.Alert.alert('onPreloadComplete')}>

                            <CachedImage
                                source={{
                                    uri: item.imageSrcs[0].source
                                }}
                                style={styles.image}
                            >
                                <View style={styles.titleBar}>
                                    <Text style={styles.title}>{item.title}</Text>
                                </View>
                            </CachedImage>
                            </ImageCacheProvider>
                            <View style={styles.titleBar}>
                                <Text numberOfLines={2} style={styles.text}>
                                    {item.description}
                                </Text>
                            </View>
                            <View style={{height: 10}}/>

                        </TouchableOpacity>
                    )}

But it don't works. I missed something else? It not crashes, it is compiled but I cannot see image...

AugustGSP commented 6 years ago

You're not giving us a lot to work with here @reybluk. I would also strongly advice you to put a little more effort when you post an issue, especially for a question that really belongs on stackoverflow. There's typos everywhere and the issue boils down to, "It don't works, solve it for me".

What versions are you using? Do you have any warnings or errors? What does your console output when you attempt to cache the images? Do your due diligence, read the documentation, you will see that you get a lot more responses that way.

With that said. Given that your code looks very similar to the example code, my initial thinking was that this is simply a styling issue. I would start with the example then implement your code one step at a time, see where it breaks and work from there.

reybluk commented 6 years ago

ok, I'll try... sorry for my poor information and my poor english. I'll write on stackoverflow. thank you