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

《reactnative实战系列教程之完成首页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、reactnative实战系列教程之完成首页首页功能前面，我们已经完成了影视信息组件的开发，接下来，我们要用该组件来完成首页界面功能的开发，如下图可以看到，首页顶部一个标题栏，下面是‘最新’、‘最热’两个选项卡。我们要完成的有标题栏、选项卡、以及选项卡切换的内容。标题栏这里的标题栏，我们使用的是ToolbarAndroid，看名称我们就知道这个是Android下特有的组件view，所以就立马想到，这个组件是iOS、android不能通用的。因此，我们定义一个TitleBarComponent，方便以后重复使用和

2、ios适配。这里，先提一下关于组件适配的一些问题。组件平台适配不同平台使用不同的组件，ReactNative提供了以下四种解决方案最直接的方案就是把组件放置到不同的文件夹下：/common/components//android/components//ios/components/根据平台不同在组件的文件命名上加以区分，如下：BigButtonIOS.jsBigButtonAndroid.js使用扩展名BigButton.ios.jsBigButton.android.js以上三种方案，再引用的时候去掉平台标

3、识，如下importBigButtonfrom'./components/BigButton';Platform.select()importReact,{Component,Platform}from'react';varComponent=Platform.select({ios:()=>require('ComponentIOS'),android:()=>require('ComponentAndroid'),});Platform.OS在iOS上会返回ios，而在Android设备或模拟器上则会返回a

4、ndroid。创建标题栏根据上面的方案，我们这里使用的是使用扩展名的方案来适配平台的。在js/component下创建TitleBarComponent.android.js文件。标题栏总共有标题、副标题和左边的返回按钮icon，返回按钮只有在子页面（二级页面）才有，因此我们定义如下属性//初始化propsstaticdefaultProps={title:'',//标题subtitle:'',//副标题subScene:true,//是否是子页面};然后，在render返回一个ToolbarAndroidre

5、nder(){return(

6、nd(this)}onIconClicked={this._onIconClick.bind(this)}style={styles.toolbar}/>);}//返回按钮事件_onIconClick(){}这里几个属性说明下title就是标题titleColor设置标题颜色subtitle就是副标题subtitleColor设置副标题颜色actions了解android的都知道Toolbar右边还可以设置一些动作按钮（我们这里没有就不设置该属性）它的格式如下,可以设置多个constactions=[{titl

7、e:'全部',show:'always',icon:require('../../img/icon_all.png'),showWithText:true},]onActionSelected动作按钮被触发时的回调（我们这里没有就不设置该属性）onIconClicked标题栏左边的图标被点击后的回调（我们这里是返回按钮，返回图标可以到github上得到）style设置整个标题栏的样式，高度、背景等。TitleBarComponent的完整代码如下importReact,{Component}from'react

8、';import{ToolbarAndroid,DeviceEventEmitter,StyleSheet,Text,TouchableOpacity,}from'react-native';exportdefaultclassTitleBarComponentextendsComponent{constructor(props){super(props);}//初始化propssta