在 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"

有什么建议吗?

解决方案

现在可以使用了...以及它是如何工作的...

1. 确保按照文档的说明格式化 api 响应:

<块引用>

data={[{title: 'Title Text', key: 'item1'}, ...]}

注意:如果您使用 https://reqres.in 作为虚拟数据，请确保您得到这样的响应.

this.setState({ data: response.data.data });

2. 在代码示例中使用 Flatlist 和 keyExtractor :

    <文本>{item.first_name}</Text>}/>

3. 查看 _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...

1. 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 });

2. Use Flatlist and keyExtractor here the code sample :

    <FlatList
          data={this.state.data}
          keyExtractor={this._keyExtractor}
          renderItem={({item}) => 
          <Text>{item.first_name}</Text>    
   
    }
     />
   

3. See the _keyExtractor, the extractor key used to make virtualized key and here the code :

   ._keyExtractor = (item, index) => index.toString();

这篇关于在 React Native 中使用 Flatlist的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！