如何在ListView React Native中自动更新新数据?

时间:2016-11-05 08:55:18

标签: android ios react-native

我正在开发一个新闻门户网站的移动应用程序,我将有不同的网址(端点),根据不同的新闻主题,它们将包含相同类型的json数据。我想在单击相应的新闻主题时使用一个列表视图来显示所有这些数据。例如,如果我点击新闻主题 Apple ,列表视图将显示有关该主题的新闻 Apple ,并且我点击 Banana ,列表视图应为使用 Banana 主题中的新数据进行更新。

到目前为止,我已经尝试过,在点击主题时,设置状态值' url'某个网址。但我没有得到预期的结果。

有人可以指导我完成整个过程吗?请不要忽略,因为这篇文章不包含代码。我需要有关如何这样做的想法。

Noob,谢谢。

1 个答案:

答案 0 :(得分:0)

这里有一些代码可以让您的项目启动,您必须修改链接以及如何处理响应。希望它有所帮助:

export default class News extends Component{

 constructor(props){
  super(props);
  this.dsinit = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 != r2 });
  var items = this.dsinit.cloneWithRows([]);
  this.state = {
    url:'http://www.google.com',
    items:items,
  };
 }


 renderRow(row){
  return <Text>row</Text>
 }

 async fetchNews(){
  let response = await fetch(this.state.url,{
    method:'POST',
    body: {data:1}
  });
  let responseJson = await response.json();
  this.setState({items:this.dsinit.cloneWithRows(responseJson)});

 }

 changeTopic(){
  this.setState({url:'anotherurl.com'});
  this.fetchNews();
 }

 render(){
  return (
   <View>
    <TouchableOpacity onPress={() => this.changeTopic() />
    <ListView dataSource={this.state.items} renderRow={(row) => this.renderRow(row)} />
   </View>
  );
 }

}