Question

我已经阅读了类似问题的所有答案，但没有一个能解决我的问题。正如你在我下面的代码片段和附加的屏幕截图中看到的那样，我已经为成功做了一切建议，但没有运气。

我正在使用https：//检索来自Flickr的照片和有效的api密钥（请参阅代码）
成功检索所有需要的照片并存储在var imadeData中（见截图）
FlatList用于通过照片ID列出3列中的项目。屏幕截图显示了3列但没有照片。

Photo.js

    const url = 'https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + API_KEY + '&user_id=46262470@N03&format=json&&per_page=20&nojsoncallback=1'; // MSU flickr

class Photos extends Component {
    constructor (props) {
        super(props);
        this.state = {
            imageData: [],
            isLoading: true,
            isError: false,
            text: '',
            columns: 3,
            key: 1,
        };
    }

getImageData=() => {

        return fetch( url )

            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    isLoading: false,
                    imageData: responseJson.photos.photo
                });
            })
            .catch((error) => {
                console.error(error);
            });
    };


    componentDidMount() {

        this.getImageData();

    }
<FlatList
                numColumns={ columns }

                data = { imageData }
                // extraData={this.state}
                renderItem={ ( { item, index } ) => {

                    return <ImageList itemWidth={ (ITEM_WIDTH - (10 * columns)) / columns }
                                     photoId={ {uri: item.id } } />

                }}
                keyExtractor={
                    (item, index ) => {
                        return `${item.id + index}`
                        // return { index }
                    }
                }
                // refreshing={this.state.refreshing}
                // onRefresh={this.handleRefresh}
            />

ImageList.js

render () {

        const {itemWidth, photoId, onPressItem } = this.props;

        return (
            <Card>

                <TouchableWithoutFeedback

                    onPress = {() => onPressItem && onPressItem(this.props.photoId)}
                    onPressIn = {() => this.animateIn()}
                    onPressOut ={ () => this.animateOut()} >

                    <Animated.View style={{
                        margin:5,
                        // backfaceVisibility: 'hidden',
                        transform: [
                            {
                                scale: 1
                            },{
                            rotateY: this.state.animateItem.interpolate({
                                inputRange: [0,1],
                                outputRange: ['180deg','0deg']
                            })
                            }
                        ]
                    }}>
                        <Image style={{width: itemWidth, height: 200 }} source={{ photoId }} />
                    </Animated.View>
                </TouchableWithoutFeedback>

            </Card>

        );


    }

Chrome console log with no errors and correct data retrieved

[iOS模拟器屏幕显示没有照片的网格视图2

编辑：

根据最后一个响应的指针，我将photoId重新创建为一个新的变量photoURL，它具有完整的url而不仅仅是照片ID。我使用以下内容：const photoURL =＆＃39; https://farm＆＃39; + item.farm +＆＃39; .static.flickr.com /＆＃39; + item.server +＆＃39; /＆＃39; + item.id +＆＃39; _＆＃39; + item.secret +＆＃39; _c.jpg＆＃39;;

 const  photoURL = 'https://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_c.jpg';

                    return <ImageList itemWidth={ (ITEM_WIDTH - (10 * columns)) / columns }
                                     image={ {uri: photoURL } } />

我还通过将每张已编码的照片粘贴到浏览器中来验证正确的照片作为参数返回到图像src uri。

但是，通过此更正，我的应用程序屏幕中仍未显示图像。请帮助我，因为我在我的心血来潮结束。感谢。

Answer 1

你的照片是否存储在本地？如果没有，您的图像组件没有正确的source道具。如果你想使用uri，它应该是这样的：

<Image style={{width: itemWidth, height: 200 }} source={{ uri: photoId }} />

和photoId是一个网址。

查看this documention

Answer 2

问题是重新渲染不会在网址发生变化时发生（最初是未定义的）。

取消注释extraData值，以便flatList知道数据已更改并重新渲染，然后显示图像。

<FlatList
                numColumns={ columns }

                data = { imageData }
                extraData={this.state}
                renderItem={ ( { item, index } ) => {

                    return <ImageList itemWidth={ (ITEM_WIDTH - (10 * columns)) / columns }
                                     photoId={ {uri: item.id } } />

                }}
                keyExtractor={
                    (item, index ) => {
                        return `${item.id + index}`
                        // return { index }
                    }
                }
            />

Answer 3

由于我的疏忽，屏幕空白。 1）。提供给FlatList的数据道具不是它的新状态（即说明data = {imageData}不正确。修改为：data = {this.state.imageData}

2）在将数据传递给ImageList组件时，我忘记通过包含prop data = {item}来传递新数据数组。我错误地专注于构建一个uri道具。这是针对命名与RN库元素类似的组件和变量的建议。我使用的两个变量让我觉得我正在撰写一个图像声明。

应用程序现在正常工作：将广告显示为3列网格或任意列的网格。

另一个建议是确保在FlatList的renderItem部分中调用组件之前包含一个返回。谢谢

来自URI源的图片未显示在React Native

3 个答案: