/ react native

React Native跨平台移动应用开发实战 - 首页

本文隶属于文章系列 React Native跨平台移动应用开发实战 ,讲解首页如何开发。首页相对来说比较复杂,用到了RN的 ScrollViewListView 组件。学完首页后,其它页面类似,因此关于功能开发方面的讲解到此结束。

RN的ListView在ScrollView的基础上做了很多性能优化,以保证在列表项非常复杂和列表很长的时候仍然能够保证页面滚动的流畅性。当然与此相伴,在使用上也会更复杂。

在页面里引入ListView组件。

componentWillMount里创建ListView的DataSource,注意必需指定rowHasChanged来帮助ListView判断列表项是否需要重新渲染。

componentWillReceiveProps里更新DataSource,否则即便数据发生了变化,列表也不会更新。

下拉刷新的时候,在列表上方显示Loading图标。

在列表滚动到结尾时,加载更多数据。

首页组件挂载后,获取列表数据,刷新导航。因为导航里的城市和运动信息可动态修改,所以需要刷新导航来动态生成,而不是由Layout来生成固定的。为了保证流畅度,所有操作都在导航动画完成之后进行。

React Native跨平台移动应用开发实战 - 首页
Share this