0
我目前正在關注Facebook's React Native Tutorial，我無法從https://facebook.github.io/react-native/movies.json獲取json對象並將它顯示在FlatList中。這裏是我的代碼：FlatList不會顯示提取的json對象
import React, { Component } from 'react';
import {FlatList, ActivityIndicator, ListView, View } from 'react-native';
import { Card, CardItem, Text, Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
class JobPost extends Component {
render(){
return(
<Card>
<CardItem header>
<Text>{this.props.header}</Text>
</CardItem>
<CardItem>
<Body>
<Text>
{this.props.body}
</Text>
</Body>
</CardItem>
</Card>
)
}
}
export default class Movies extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: ''
}
}
componentDidMount() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
isLoading: false,
dataSource: responseJson,
});
})
.catch((error) => {
console.error(error);
});
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{flex: 1, paddingTop: 20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Card header={item.title} body={item.releaseYear}/>}
keyExtractor={item => item.title}
/>
</View>
);
}
}
控制檯日誌打印出json對象工作正常。但是，當我在IOS模擬器中運行它時，我只是得到一個空白屏幕。
您可以添加更多詳細信息嗎？您是否嘗試在無服務器調用的情況下運行代碼？平板列表是否顯示虛擬數據？ –
我認爲這是因爲你的renderItem道具。嘗試記錄'item'參數，看看你是否正確調用對象。 – Raymond