在 React Native 中使用 Flatlist [英] Using Flatlist in react native
问题描述
我的平面列表现在如何显示任何列表,它只是在某些列表中显示空白容器:
这里是json数据:
<代码>{第2页,每页":3,总计":12,"total_pages": 4,数据": [{身份证":4,"first_name": "夏娃","last_name": "霍尔特",头像":https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"},{身份证":5,"first_name": "查尔斯","last_name": "莫里斯",头像":https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"},{身份证":6,"first_name": "特蕾西","last_name": "拉莫斯",头像":https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"}]}
从 regres.in 测试虚拟数据,这里是我的代码:
class UserList 扩展 React.Component {状态 = {apiAreLoaded: 假,};构造函数(道具){超级(道具);this.state.data = [];}异步 componentDidMount() {//定义apiconst api = 创建({baseURL: 'https://reqres.in/',标题:{接受:'应用程序/json'}})//开始拨打电话//api.get('/api/users?page=2').then((response) => response.data).then(console.log);//使用异步const response = await api.get('/api/users?page=2');//console.log(response.data.data);this.setState({ apiAreLoaded: true, data: response.data });//console.log(this.state.data);}使成为() {如果(!this.state.apiAreLoaded){返回 <AppLoading/>;}返回(<容器><内容><平面列表数据={this.state.data}renderItem={({ item }) =>{控制台.日志(数据.头像)返回(<列表项><Text>{item.id}</Text></ListItem>)}}/></内容></容器>);}}导出{用户列表};
有关信息,我正在使用此版本:
<块引用>"expo": "^27.0.1", "native-base": "^2.6.1",反应":^ 16.4.1","react-native": "~0.55.2"
有什么建议吗?
现在可以使用了...以及它是如何工作的...
- 确保按照文档的说明格式化 api 响应:
<块引用>
data={[{title: 'Title Text', key: 'item1'}, ...]}
注意:如果您使用 https://reqres.in 作为虚拟数据,请确保您得到这样的响应.
this.setState({ data: response.data.data });
在代码示例中使用 Flatlist 和 keyExtractor :
<文本>{item.first_name}</Text>}/> 查看 _keyExtractor,用于制作虚拟化密钥的提取器密钥,代码如下:
._keyExtractor = (item, index) =>index.toString();
How can my flatlist now showing any list, it just show blank inside some container:
here the json Data :
{
"page": 2,
"per_page": 3,
"total": 12,
"total_pages": 4,
"data": [
{
"id": 4,
"first_name": "Eve",
"last_name": "Holt",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
},
{
"id": 5,
"first_name": "Charles",
"last_name": "Morris",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
},
{
"id": 6,
"first_name": "Tracey",
"last_name": "Ramos",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
}
]
}
from regres.in to test the dummy data, and here my code :
class UserList extends React.Component {
state = {
apiAreLoaded: false,
};
constructor(props) {
super(props);
this.state.data = [];
}
async componentDidMount() {
// define the api
const api = create({
baseURL: 'https://reqres.in/',
headers: {
Accept: 'application/json'
}
})
// start making calls
//api.get('/api/users?page=2').then((response) => response.data).then(console.log);
//use async
const response = await api.get('/api/users?page=2');
// console.log(response.data.data);
this.setState({ apiAreLoaded: true, data: response.data });
// console.log(this.state.data);
}
render() {
if(!this.state.apiAreLoaded)
{
return <AppLoading />;
}
return(
<Container>
<Content>
<FlatList
data={this.state.data}
renderItem={({ item }) => {
console.log(data.avatar)
return(
<ListItem>
<Text>{item.id}</Text>
</ListItem>
)
}}
/>
</Content>
</Container>
);
}
}
export {UserList};
For information I am using this version :
"expo": "^27.0.1", "native-base": "^2.6.1", "react": "^16.4.1", "react-native": "~0.55.2"
any suggestion ?
It works now... and here how it works...
- Make sure you format the api response as the doc say like this :
data={[{title: 'Title Text', key: 'item1'}, ...]}
note : if you use https://reqres.in as dummy data make sure you get the response like this.
this.setState({ data: response.data.data });
Use Flatlist and keyExtractor here the code sample :
<FlatList data={this.state.data} keyExtractor={this._keyExtractor} renderItem={({item}) => <Text>{item.first_name}</Text> } />
See the _keyExtractor, the extractor key used to make virtualized key and here the code :
._keyExtractor = (item, index) => index.toString();
这篇关于在 React Native 中使用 Flatlist的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!