我尝试基于本机基础创建列表项， 我已经阅读了此文档和此文档
不幸的是，所有这些方法都不起作用。 我相信我的代码有问题，因为我是反应工作的新手
当我运行我的代码时，我被空白了。 这是我的代码。 请给出一些建议来修复我的错误。
import React from 'react';
import {ListView} from 'react-native';
import { Container, Content, Card, CardItem, Button, Body, Text, List, ListItem} from 'native-base';
import {create} from 'apisauce';
import { AppLoading } from 'expo';
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
class UserList extends React.Component {
state = {
apiAreLoaded: false,
dataSource: ds
};
constructor() {
super();
}
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 });
this.setState = {
dataSource: ds.cloneWithRows(response.data.data),
};
// console.log(this.state.dataSource);
}
render() {
if(!this.state.apiAreLoaded)
{
return <AppLoading />;
}
return(
<Container>
<Content>
<List dataObject={this.state.dataSource}
renderRow={(item) =>
<ListItem>
<Text>{item.avatar}</Text>
</ListItem>
}>
</List>
</Content>
</Container>
// <ListView
// dataSource={this.state.dataSource}
// renderRow={(rowData) =>
// <Card>
// <CardItem header>
// <Text> {rowData.avatar}</Text>
// </CardItem>
// <CardItem>
// <Body>
// <Text>
// {rowData.first_name}
// </Text>
// </Body>
// </CardItem>
// <CardItem footer>
// <Text>{rowData.avatar}</Text>
// </CardItem>
// </Card>
// }
// />
);
}
}
export {UserList};
谢谢伙计。
你的dataArray道具List不见了。尝试将dataObject替换为dataArray
<List
dataArray={this.state.dataSource}
renderRow={(item) =>
<ListItem>
<Text>{item.avatar}</Text>
</ListItem>
}/>
请参阅 http://docs.nativebase.io/Components.html#dynamic-list-headref。
本机基本列表已弃用。请改用 React Native Flatlist。