我尝试基于原生基础创建列表项，我已经阅读this document和this document
不幸的是，所有这些方法都不起作用我相信我的代码有问题，因为我刚开始做出反应
我运行代码时空白了 . 这是我的代码 . 请给出一些修复我的错误的建议 .
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};
谢了哥们 .
1 回答
List的dataArray道具遗失了 . 尝试用dataArray替换dataObject请参阅http://docs.nativebase.io/Components.html#dynamic-list-headref .
不推荐使用NativeBase List . 请改用React Native Flatlist .