Question

我写的代码是wordpress。

我成功获取了标题，类别ID和特色媒体ID。然后我尝试获取图像uri来显示它。

有线的事情是：每次帖子标题和类别ID和作者ID都非常快，但是在我按下更多加载（由Gifted Listview内置）之前，图像不会显示。请求发生在＆＃34;加载更多＆＃34;和＆＃34; ListViewOnFresh＆＃34;，所以它应该是这样的。

我尝试使用console.log输出＆＃34;开始加载＆＃34;和＃34;加载完成＆＃34;当图像开始和结束时。但是，我可以看到它从未加载，除非我按下更多加载。

即使它被加载，如果我拉动刷新（调用ListViewOnRefresh），它也会再次消失。

我也尝试输出dataRows，它没有任何问题，feature_image显示正确的uri。

我真的无法解决这个问题。提前感谢您的帮助。

var MovieListScreen = React.createClass({
    componentDidMount: function() {
        Controllers.NavigationControllerIOS("movies_nav").setLeftButtons([{
            title: "Categories",
            onPress: function() {
                Controllers.DrawerControllerIOS("drawer").toggle({side:"left"});
            }
        }]);
    },



    renderListViewRow: function(row){
        return(
            <View >
                <TouchableHighlight underlayColor={'#f3f3f2'} onPress={()=>this.selectRow(row)}>
                    <View style={styles.articleContainer}>
                        <View style={styles.rowDetailsContainer}>
                            <Image resizeMode="cover" style={styles.featuredImage}
                                source={{uri: row.featured_image}}
                                 onLoadStart={() =>{console.log('start loading')}}
                                onLoadEnd={() => {console.log('loading finished')}}
                                />
                            <Text style={styles.articleTitle}>
                                    {row.title.rendered}
                                </Text>
                                <Text style={styles.articleTime} >
                                    Posted by {row.author}, Category: {row.categories[0]}
                                </Text>
                                <Text style={styles.articleExcerpt}>
                                    {row.excerpt.rendered}
                                </Text>

                            </View>
                        </View>
                    </TouchableHighlight>
                    <View style={styles.separator}/>
                    <View style={styles.articleActions}>
                        <Icon style={{flex:1}} name="share-alt" size={20} color="#0088CC" />
                        <Icon style={{flex:1}} name="thumbs-o-up" size={20} color="#0088CC" />
                        <Icon style={{flex:1}} name="star-o" size={20} color="#0088CC" />
                        <View style={{flexDirection:'row',justifyContent:'center',alignItems:'center'}}><Icon style={{flex:1}} name="external-link" size={20} color="#0088CC" /><Text style={{fontSize:15,color:'#0088CC'}}> Read More</Text></View>



                    </View>
                </View>
            );
        },
        listViewOnRefresh: function(page, callback){
            var rowsData = [];
            var REQUEST_URL = 'http://jo.wtf/wp-json/wp/v2/posts?per_page=10&order=asc&page='+page;

            fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {responseData.map((obj)=>{
                fetch('http://jo.wtf/wp-json/wp/v2/media/'+obj.featured_media)
                .then((responseMedia) => responseMedia.json())
                .then((responseDataMedia) => {
                    obj.featured_image= responseDataMedia.guid.rendered;
                })
                rowsData.push(obj);
                console.log(rowsData);
            })
            callback(rowsData);
            return;
        })
        .done();
    },

    selectRow: function(row){
        var navigationController = Controllers.NavigationControllerIOS("movies_nav");
        navigationController.push({
            component: "PushedScreen", // the unique ID registered with AppRegistry.registerComponent (required)
            backButtonTitle: "", // override the nav bar back button title for the pushed screen (optional)
            backButtonHidden: false, // hide the nav bar back button for the pushed screen altogether (optional)
        });
    },

    render: function() {
        return (
            <RefreshableListView renderRow={(row)=>this.renderListViewRow(row)}
                onRefresh={(page, callback)=>this.listViewOnRefresh(page, callback)}
                backgroundColor={'#EFEFEF'}
                style={styles.listview}/>
        );
    },

});

Answer 1

我认为你应该补充一下风格= {{宽度：200，高度：300}} 到你的图片标签

Answer 2

我以另一种方式解决了这个问题。

我试图用异步函数重写代码，但它也没有帮助。我认为它是由2个api呼叫同时引起的，虽然为什么我不能这样做。

无论如何，我不想调用一个API来获取缩略图ID，然后调用N API来获取这些缩略图的URL，所以我更改了wordpress API。

将一些代码添加到我的主题中的function.php文件中解决了它。

似乎我无法在这里插入PHP代码...请看这里： http://jo.wtf/adding-extra-fields-to-wp-api-output/

React Native Network Image无法渲染

2 个答案: