React native 反应本机基列表项为空_React Native_Native Base

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

react-native

React native 反应本机基列表项为空,react-native,native-base,React Native,Native Base,我尝试基于本机基创建列表项，我已经读过了不幸的是，所有这些方法都不起作用。我相信我的代码有问题，因为我是新的反应工作当我运行我的代码时，我得到了空白。这是我的密码。请给我一些建议来纠正我的错误 import React from 'react'; import {ListView} from 'react-native'; import { Container, Content, Card, CardItem, Button, Body, Text, List, ListItem}

我尝试基于本机基创建列表项，我已经读过了

不幸的是，所有这些方法都不起作用。我相信我的代码有问题，因为我是新的反应工作

当我运行我的代码时，我得到了空白。这是我的密码。请给我一些建议来纠正我的错误

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};

从“React”导入React；
从“react native”导入{ListView}；
从“本机库”导入{容器、内容、卡片、卡片项、按钮、正文、文本、列表、列表项}；
从“APISOUT”导入{create}；
从“expo”导入{AppLoading}；
让ds=newListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
类UserList扩展了React.Component{
状态={
apiAreLoaded:错误，
数据源：ds
};
构造函数（）{
超级（）；
}
异步组件didmount（）{
//定义api
常量api=创建({
baseURL:'https://reqres.in/',
标题：{
接受：'application/json'
}
})
//开始打电话
//get（'/api/users？page=2'）。然后（（response）=>response.data）。然后（console.log）；
//使用异步
const response=wait api.get（'/api/users？page=2'）；
日志（response.data.data）；
this.setState（{apareload:true}）；
this.setState={
数据源：ds.cloneWithRows（response.data.data），
};
//log（this.state.dataSource）；
}
render（）{
如果（！this.state.apiAreLoaded）
{
返回；
}
返回(
{item.avatar}
}>
//    
//     
//         
//{rowData.avatar}
//         
//         
//         
//             
//{rowData.first_name}
//             
//         
//         
//         
//{rowData.avatar}
//         
//     
// }
// />
);
}
}
导出{UserList}；

谢谢你，伙计。

你的

列表的数据数组道具丢失了。尝试将dataObject
替换为dataArray

<List 
    dataArray={this.state.dataSource}
    renderRow={(item) =>
    <ListItem>
       <Text>{item.avatar}</Text>
     </ListItem>
}/>


{item.avatar}
}/>

参考
NativeBase列表已弃用。改为使用React Native Flatlist。
它将成为item.avatar undefined。。。虽然化身在api结果的对象中可用。。。我想当数据源类型为array时，dataArray是正确的，但如果数据是Objective，则不起作用。我已经解决了它，并按照您的建议使用Flatlist。我的回答是：