内容发布更新时间 : 2024/12/26 23:06:58星期一 下面是文章的全部内容请认真阅读。

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(

title={this.props.title}

navIcon={this.props.subScene?require('../../img/ic_actionbar_back.png'):null} titleColor='white'

subtitle={this.props.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的完整代码如下