react native - use flatlist instead scrollview -
i've following code, works fine can connect api , fetch data, since i'm getting huge list of threads how can refactor code using flatlist instead?
thanks
import react, { component } 'react'; import { scrollview } 'react-native'; import axios 'axios'; import threaddetail './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;
export default class topiclist extends component { constructor() { super(props); this.state = { threads: [] } } componentwillmount() { .... // same 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> } }
note: haven't tested this
Comments
Post a Comment