reactnative实战系列教程之完成首页.doc

react native 实战系列教程之完成首页 首页功能 前面，我们已经完成了影视信息组件的开发，接下来，我们要用该组件来完成首页界面功能的开发，如下图 可以看到，首页顶部一个标题栏，下面是‘最新’、‘最热’两个选项卡。我们要完成的有标题栏、选项卡、以及选项卡切换的内容。 标题栏 这里的标题栏，我们使用的是ToolbarAndroid，看名称我们就知道这个是Android下特有的组件view，所以就立马想到，这个组件是iOS、android不能通用的。因此，我们定义一个TitleBarComponent，方便以后重复使用和ios适配。这里，先提一下关于组件适配的一些问题。 组件平台适配 不同平台使用不同的组件，React Native 提供了以下四种解决方案 最直接的方案就是把组件放置到不同的文件夹下： /common/components/ /android/components/ /ios/components/ 根据平台不同在组件的文件命名上加以区分，如下： BigButtonIOS.js BigButtonAndroid.js 使用扩展名 BigButton.ios.js BigButton.android.js 以上三种方案，再引用的时候去掉平台标识，如下 import BigButton from ./components/BigButton; Platform.select() import React, {Component,Platform} from react; var Component = Platform.select({ ios: () = require(ComponentIOS), android: () = require(ComponentAndroid), }); Platform.OS在iOS上会返回ios，而在Android设备或模拟器上则会返回android。 创建标题栏 根据上面的方案，我们这里使用的是使用扩展名的方案来适配平台的。在js/component下创建TitleBarComponent.android.js文件。 标题栏总共有标题、副标题和左边的返回按钮icon，返回按钮只有在子页面（二级页面）才有，因此我们定义如下属性 //初始化props static defaultProps = { title:,//标题 subtitle:,//副标题 subScene:true,//是否是子页面 }; 然后，在render返回一个ToolbarAndroid render() { return( ToolbarAndroid title={ps.title} navIcon={ps.subScene?require(../../img/ic_actionbar_back.png):null} titleColor=white subtitle={ps.subtitle} subtitleColor=#ebf0f6 actions={actions} onActionSelected={this._onActionClick.bind(this)} onIconClicked={this._onIconClick.bind(this)} style={styles.toolbar} / ); } //返回按钮事件 _onIconClick(){ } 这里几个属性说明下 title 就是标题 titleColor 设置标题颜色 subtitle 就是副标题 subtitleColor 设置副标题颜色 actions 了解android的都知道Toolbar右边还可以设置一些动作按钮（我们这里没有就不设置该属性） 它的格式如下,可以设置多个 const actions = [ {title:全部,show:always,icon:require(../../img/icon_all.png),showWithText:true}, ] onActionSelected 动作按钮被触发时的回调（我们这里没有就不设置该属性） onIconClicked 标题栏左边的图标被点击后的回调（我们这里是返回按钮，返回图标可以到github上得到） style 设置整个标题栏的样式，高度、背景等。 TitleBarComponent的完整代