Question

我尝试基于本机库创建列表项，我已经读过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};

感谢队友。

Answer 1

您的dataArray的{{1}}道具丢失了。尝试将List替换为dataObject

dataArray

引用http://docs.nativebase.io/Components.html#dynamic-list-headref。

NativeBase列表已弃用。改为使用React Native Flatlist。

反应本机本机基本列表项为空

1 个答案: