最近一段时间比较忙，天天加班，没时间学习RN，也没时间写博客。今天趁着有时间，用一个仿网易新闻列表的小Demo来复习一下前面学过的东西。
之前对于数据的加载，都是去通过加载本地的json文件，但从未从网络中去获取数据。在今天的Demo中，我们用到的是一个Api，fetch，通过它我们可以从网络中获取到数据，然后把它转成json数据。详细了解fetch的用法
现在大多数app最下面都带着一个TabBar，之前有学习过TabBarIOS，但是那只适用于IOS，为了能够达到双平台适配，Demo中用到了一个开源框架 react-native-tab-navigator 。用法比较简单，GitHub上有详细使用说明文档
Demo展示
news_ios.gif
整个Demo的基本小框架也比较简单，通过TabNavigator，在一个route栈中来回的切换不同的Component，也就是我们的界面。这其实有点像一个Activity对应着不同的Fragment一样。在代码中的体现就是：
render() {
return (
<TabNavigator
tabBarStyle={styles.tabBarStyle}
>
{this._renderTabItem(config[0].news, config[0].normalIconName, config[0].selectedIconName, config[0].selectedTab, config[0].news, NewsComponent, '网易新闻')}
{this._renderTabItem(config[1].live, config[1].normalIconName, config[1].selectedIconName, config[1].selectedTab, config[1].news, LiveComponent, '花椒直播')}
{this._renderTabItem(config[2].topic, config[2].normalIconName, config[2].selectedIconName, config[2].selectedTab, config[2].news, TopicComponent, '情感话题')}
{this._renderTabItem(config[3].mine, config[3].normalIconName, config[3].selectedIconName, config[3].selectedTab, config[3].news, MineComponent, '个人设置')}
</TabNavigator>
);
}
第一个参数是TabBar的Item的title，第二个是未选中时的图标名，第三个是造中是的图标名，第四个是用来记录目前被选中的Item项，后面的三个参数与Navigator有关，之前在学习Navigator中有学到过，一个是初始化route的name，一个是这个route需要加载哪个组件以及最后一个就是这个Component的名称。上面代码都是调的同一个方法，说明有许多共通之处，所以我们就把它时行抽取，不然的话，写成我们之前学习TabBarIOS时那样的代码，看着就觉得恶心。
_renderTabItem(title, iconName, selectedIconName, selectedTab, componentName, component, NavigationTitle) {
return (
<TabNavigator.Item
title={title}
renderIcon={() => <Image source={{uri: iconName}} style={styles.iconStyle}/>}
renderSelectedIcon={() => <Image source={{uri: selectedIconName}} style={styles.iconStyle}/>}
onPress={() => this.setState({selectedTab: selectedTab})}
selected={this.state.selectedTab == selectedTab}
selectedTitleStyle={styles.selectedTitleStyle}
titleStyle={styles.tabTitleStyle}
>
<Navigator
initialRoute={{name: componentName, component: component, title: NavigationTitle}}
configureScene={this._cofigureScene}
renderScene={this._renderScene}
navigationBar={
<Navigator.NavigationBar
style={styles.navBarContainer}
routeMapper={routeMapper}
/>
}
/>
</TabNavigator.Item>
);
}
在新闻组件中，由两部分构成，一个是图片的自动轮播图,这个之前有学习过，未看过的可以点这里。这里遇到了一个小坑。之前学习的轮播图只有一个带点的Indicator，现在左边还加了一个Text，所以很显然的想到在一张图片结束的时候去改变这个Text就OK。所以直接在下面的代码进需进行监听来改值
onMomentumScrollEnd={(scrollView)=>this.onAnimationEnd(scrollView)}
看看具体的实现：
onAnimationEnd(scrollView) {
let offsetX = scrollView.nativeEvent.contentOffset.x;
let currentPage = Math.floor((offsetX / width));
this.setState({
currentPage: currentPage,
// title: this.props.imgData[currentPage].title
});
}
被注释的那行代码在Android平台上死活不执行，导致图片标题一致不变。但是它的图片却可以实时改变，不知道是什么原因。有知道的小伙伴可以告知一声。最后就直接把它放在计时器里面也可以实现图片标题改变的效果。具体的可以查看源码。至于第二部分就是ListVIew，这个就非常简单了。若有不熟悉的可以直接点这里
我只是简单地完成了四个模块中新闻组件，有兴趣的小伙伴可以通过抓包工具来继续实现其他模块。还有一个就是给ListView实现下拉刷新，上拉加载更多等等。最后附上在Android平台上的效果
news_android.gif
好了。今天就写到这里了。坚持学习，继续学习，走向大神之路。
完整源码下载
网友评论