React native 使用平面列表代替滚动视图

我有下面的代码，它工作得很好，我可以连接到API并获取数据，因为我得到了一个巨大的线程列表，如何使用Flatlist来重构代码

谢谢

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import ThreadDetail from './ThreadDetail';

class TopicList extends Component {
  state = {
    threads: []
  };

  componentWillMount() {
    axios.get('https://xxxxxxx.devmn.net/api/v1/forums/threads?topic_id=2418', {
      headers: {
        'client-id': 'a0f21e'
      }
    })
      .then(response => this.setState({ threads: response.data.threads }));
  }

  renderThreads() {
    return this.state.threads.map(thread =>
      <ThreadDetail key={thread.thread.id} thread={thread.thread} />
    );
  }

  render() {
    return (
      <ScrollView style={styles.listStyle}>
        {this.renderThreads()}
      </ScrollView>
    );
  }
}

const styles = {
  listStyle: {
    backgroundColor: 'purple'
  }
}

export default TopicList;

import React，{Component}来自'React'；
从“react native”导入{ScrollView}；
从“axios”导入axios；
从“/ThreadDetail”导入ThreadDetail；
类TopicList扩展组件{
状态={
线程：[]
};
组件willmount（）{
axios.get（）https://xxxxxxx.devmn.net/api/v1/forums/threads?topic_id=2418', {
标题：{
“客户端id”：“a0f21e”
}
})
.then（response=>this.setState（{threads:response.data.threads}））；
}
renderThreads（）{
返回此.state.threads.map（thread=>
);
}
render（）{
返回(
{this.renderThreads（）}
);
}
}
常量样式={
列表样式：{
背景颜色：“紫色”
}
}
导出默认主题列表；

导出默认类TopicList扩展组件{
构造函数（）{
超级（道具）；
此.state={
线程：[]
}
}
组件willmount（）{
..//与您的代码相同
}
renderItem（{index，item}）{
返回
}
render（）{
返回
item.thread.id}/>
}
}

注意：我还没有测试这个导出默认类TopicList扩展组件{ 构造函数（）{ 超级（道具）； 此.state={ 线程：[] } } 组件willmount（）{ ..//与您的代码相同 } renderItem（{index，item}）{ 返回 } render（）{ 返回 item.thread.id}/> } }

---

注意：我还没有测试过这个

我在iOS模拟器中得到一个错误`无法读取未定义的属性'索引'，@BrainYoungMy代码在使用

索引

未定义时看起来是这样的@头脑Young@AlbertoFerioli你能告诉我你的线程数据是如何构造的吗<代码>响应.数据.线程我在@Brain Young下面附上了一个截图。Thanks我在iOS模拟器“无法读取未定义的属性”索引中遇到一个错误，@BrainYoungMy代码在使用

索引

未定义时看起来是这样的@头脑Young@AlbertoFerioli你能告诉我你的线程数据是如何构造的吗<代码>响应.数据.线程我在@Brain Young下面附上了一个截图。谢谢你的问题解决了吗？你的问题解决了吗？

export default class TopicList extends Component {

     constructor() {
           super(props);

           this.state = {
                threads: []
           }
     }

     componentWillMount() {
           .... // same as your code
     }

     renderItem({index, item}) {
           return <ThreadDetail thread={item.thread} />
     }

     render() {
          return <View>
                     <FlatList 
                         data={this.state.threads}
                         renderItems={this.renderItem}
                         keyExtractor={(item, index) => item.thread.id} />
                 </View>
     }
}