【稀饭】react native 实战系列教程之完成首页

前端之家收集整理的这篇文章主要介绍了【稀饭】react native 实战系列教程之完成首页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首页功能

前面,我们已经完成了影视信息组件的开发,接下来,我们要用该组件来完成首页界面功能的开发,如下图

可以看到,首页顶部一个标题栏,下面是‘最新’、‘最热’两个选项卡。我们要完成的有标题栏、选项卡、以及选项卡切换的内容

标题

这里的标题栏,我们使用的是ToolbarAndroid,看名称我们就知道这个是android下特有的组件view,所以就立马想到,这个组件是ios、android不能通用的。因此,我们定义一个TitleBarComponent,方便以后重复使用和ios适配。这里,先提一下关于组件适配的一些问题。

组件平台适配

不同平台使用不同的组件,React Native 提供了以下四种解决方

  • 最直接的方案就是把组件放置到不同的文件夹下:
  1. /common/components/
  2. /android/components/
  3. /ios/components/
  • 根据平台不同在组件的文件命名上加以区分,如下:
  1. BigButtonIOS.js
  2. BigButtonAndroid.js
  • 使用扩展名
  1. BigButton.ios.js
  2. BigButton.android.js

以上三种方案,再引用的时候去掉平台标识,如下

  1. import BigButton from './components/BigButton';
  • Platform.select()
  1. import React,{Component,Platform} from 'react';
  2.  
  3. var Component = Platform.select({
  4. ios: () => require('ComponentIOS'),android: () => require('ComponentAndroid'),});

Platform.OS在iOS上会返回ios,而在Android设备或模拟器上则会返回android。

创建标题

根据上面的方案,我们这里使用的是使用扩展名的方案来适配平台的。在js/component下创建TitleBarComponent.android.js文件

标题栏总共有标题、副标题和左边的返回按钮icon,返回按钮只有在子页面(二级页面)才有,因此我们定义如下属性

  1. //初始化props
  2. static defaultProps = {
  3. title:'',//标题
  4. subtitle:'',//副标题
  5. subScene:true,//是否是子页面
  6. };

然后,在render返回一个ToolbarAndroid

  1. render() {
  2. return(
  3. <ToolbarAndroid 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右边还可以设置一些动作按钮(我们这里没有就不设置该属性

它的格式如下,可以设置多个

  1. const actions = [
  2. {title:'全部',show:'always',icon:require('../../img/icon_all.png'),showWithText:true},]
  • onActionSelected 动作按钮被触发时的回调(我们这里没有就不设置该属性
  • onIconClicked 标题栏左边的图标被点击后的回调(我们这里是返回按钮,返回图标可以到github上得到)
  • style 设置整个标题栏的样式,高度、背景等。

TitleBarComponent的完整代码如下

  1. import React,{Component} from 'react';
  2. import {
  3. ToolbarAndroid,DeviceEventEmitter,StyleSheet,Text,TouchableOpacity,}from 'react-native';
  4.  
  5. export default class TitleBarComponent extends Component {
  6. constructor(props) {
  7. super(props);
  8. }
  9.  
  10. //初始化props
  11. static defaultProps = {
  12. title:'',//标题
  13. subtitle:'',//副标题
  14. subScene:true,//是否是子页面
  15. };
  16.  
  17. render() {
  18. return(
  19. <ToolbarAndroid title={this.props.title} navIcon={this.props.subScene?require('../../img/ic_actionbar_back.png'):null} titleColor='white' subtitle={this.props.subtitle} subtitleColor='#ebf0f6' onIconClicked={this._onIconClick.bind(this)} style={styles.toolbar} /> ); } //返回按钮事件 _onIconClick(){ } } const styles = StyleSheet.create({ toolbar:{ height:56,backgroundColor:'#ff5722',},});

这样我们就完成了标题栏的设计。

创建首页Scene

添加标题

接下来我们需要创建一个首页Scene,来展示首页功能。在js文件夹新建HomeScene.js文件,并为首页添加一个标题栏。

  1. import React,{Component} from 'react';
  2. import {
  3. View,TouchableOpacity
  4. } from 'react-native';
  5.  
  6. import TitleBar from './component/TitleBarComponent'
  7.  
  8. export default class HomeScene extends Component{
  9. constructor(props){
  10. super(props);
  11. }
  12.  
  13. render(){
  14. return(
  15. <View style={{flex:1}}> <TitleBar title="首页" subtitle="看韩剧,上稀饭" subScene={false}/> </View> ); }; }

然后将index.android.js使用HomeScene

  1. import HomeScene from './js/HomeScene';
  2.  
  3. class XiFan extends Component {
  4.  
  5. render(){
  6. return(
  7. <HomeScene/> ); } } AppRegistry.registerComponent('XiFan',() => XiFan);

执行代码,就可以看到如下效果

添加选项卡

这样首页标题有了,我们接下来要添加‘最新’、‘最热’两个选项卡

在HomeScene内添加如下代码

state增加一个tabIndex属性,标识当前选中的tab项

  1. constructor(props){
  2. super(props);
  3. this.state = {
  4. tabIndex:0,};
  5. }

接着就是绘制Tab了

  1. //tab切换
  2. _onTabPress(index){
  3. this.setState({
  4. tabIndex:index,});
  5. }
  6.  
  7. render(){
  8. return(
  9. <View style={{flex:1}}> <TitleBar title="首页" subtitle="看韩剧,上稀饭" subScene={false}/> <View style={{height:35,flexDirection:'row',justifyContent:'center',alignItems:'center',backgroundColor:'#ff5722'}}> <View style={{flex:1}}> <TouchableOpacity style={{flex:1,justifyContent:'center'}} activeOpacity={0.6} onPress={this._onTabPress.bind(this,0)}> <Text style={this.state.tabIndex===0?styles.TabSelect:styles.TabUnSelect}>最新</Text> </TouchableOpacity> <View style={this.state.tabIndex===0?styles.TabUnderlineSelect:styles.TabUnderlineUnSelect}/> </View> <View style={{flex:1}}> <TouchableOpacity style={{flex:1,1)}> <Text style={this.state.tabIndex===0?styles.TabUnSelect:styles.TabSelect}>最热</Text> </TouchableOpacity> <View style={this.state.tabIndex===0?styles.TabUnderlineUnSelect:styles.TabUnderlineSelect}/> </View> </View> </View> ); };

该段代码的核心主要是根据tabIndex是否被选中项,动态修改View的样式

  1. var styles = StyleSheet.create({
  2. TabSelect:{
  3. flex:1,textAlign:'center',color:'white',TabUnderlineSelect:{
  4. backgroundColor:'white',height:2,TabUnSelect:{
  5. flex:1,color:'#d5d5d5',TabUnderlineUnSelect:{
  6. height:0,});

现在的效果是这样的

添加选项卡内容

应用的功能就是像在堆积木一样,一点一点叠起来。现在给选项卡下方添加对应的内容。选项卡切换时,底下切换到对应的内容,我们这里使用的是ViewPagerAndroid。

  1. //ViewPager 页面发生切换时调用修改tabIndex
  2. _onPageSelected(event){
  3. const position = event.nativeEvent.position;
  4. this.setState({
  5. tabIndex:position,});
  6. }
  7. _onPageScrollStateChanged(status){
  8. //idle 空闲,意味着当前没有交互。
  9.  
  10. //dragging 拖动中,意味着当前页面正在被拖动。
  11.  
  12. //settling 处理中,意味着当前页面发生过交互,且正在结束开头或收尾的动画。
  13. }
  14.  
  15. render(){
  16. return(
  17. <View style={{flex:1}}> ...//省略其它代码 <ViewPagerAndroid style={{flex:1}} initialPage={0} onPageSelected={this._onPageSelected.bind(this)} scrollEnabled={true} pageMargin={0} onPageScrollStateChanged={this._onPageScrollStateChanged} keyboardDismissMode='on-drag' ref={(viewPager)=>{this.viewPager = viewPager}} > <View style={{flex:1}}> <DramaComponent url='/hanju/new/'/> </View> <View style={{flex:1}}> <DramaComponent url='/hanju/renqi/'/> </View> </ViewPagerAndroid> </View> ); };

主要说几个属性

  • initialPage 初始显示哪个页面
  • onPageSelected页面选中时的回调函数
  • onPageScrollStateChanged 滚动状态发生变化时调用(目前没用到)
  • ref 定义该组件的实例对象,这里我们将ViewPagerAndroid实例对象声明为viewPager,然后我们就可以在这个页面内使用该对象,比如,前面的_onTabPress方法,在tab切换时需要下面的内容也切换到对应的内容,所以我们对_onTabPress方法添加如下代码
  1. //tab切换
  2. _onTabPress(index){
  3. this.viewPager.setPage(index);
  4. this.setState({
  5. tabIndex:index,});
  6. }

调用了viewPager对象setPage方法,进行页面切换。

还有另一种定义ref方式,如下:

  1. <ViewPagerAndroid
  2. ...//省略其它代码
  3. ref="viewPage">
  4. ...//省略其它代码
  5. </ViewPagerAndroid>

然后使用对象时

  1. //tab切换
  2. _onTabPress(index){
  3. this.refs.viewPage.setPage(index);
  4. this.setState({
  5. tabIndex:index,});
  6. }

再看下上面的代码,我们在ViewPagerAndroid内部塞了两个View,这两个View实际上就是要显示内容了,它们就是我们之前自定义的DramaComponent,传入了不同的url,一个是最新的地址,一个是最热的人气,这样解析显示出来就是对应的数据了。

关于ViewPagerAndroid更多信息,可以查看ViewPagerAndroid

最后上一下本节的完成的成果效果图:

HomeScene.js的所有代码

  1. import React,ViewPagerAndroid
  2. } from 'react-native';
  3.  
  4. import TitleBar from './component/TitleBarComponent'
  5. import DramaComponent from './component/DramaComponent';
  6.  
  7. export default class HomeScene extends Component{
  8. constructor(props){
  9. super(props);
  10. this.state = {
  11. tabIndex:0,};
  12. }
  13.  
  14. //tab切换
  15. _onTabPress(index){
  16. this.viewPager.setPage(index);
  17. this.setState({
  18. tabIndex:index,});
  19. }
  20. //ViewPager 页面发生切换时调用
  21. _onPageSelected(event){
  22. const position = event.nativeEvent.position;
  23. this.setState({
  24. tabIndex:position,});
  25. }
  26.  
  27. _onPageScrollStateChanged(status){
  28. //idle 空闲,意味着当前没有交互。
  29.  
  30. //dragging 拖动中,意味着当前页面正在被拖动。
  31.  
  32. //settling 处理中,意味着当前页面发生过交互,且正在结束开头或收尾的动画。
  33. }
  34.  
  35. render(){
  36. return(
  37. <View style={{flex:1}}> <TitleBar title="首页" subtitle="看韩剧,1)}> <Text style={this.state.tabIndex===0?styles.TabUnSelect:styles.TabSelect}>最热</Text> </TouchableOpacity> <View style={this.state.tabIndex===0?styles.TabUnderlineUnSelect:styles.TabUnderlineSelect}/> </View> </View> <ViewPagerAndroid style={{flex:1}} initialPage={0} onPageSelected={this._onPageSelected.bind(this)} scrollEnabled={true} pageMargin={0} onPageScrollStateChanged={this._onPageScrollStateChanged} keyboardDismissMode='on-drag' ref={(viewPager)=>{this.viewPager = viewPager}} > <View style={{flex:1}}> <DramaComponent url='/hanju/new/'/> </View> <View style={{flex:1}}> <DramaComponent url='/hanju/renqi/'/> </View> </ViewPagerAndroid> </View> ); }; } var styles = StyleSheet.create({ TabSelect:{ flex:1,textAlign:'center',color:'white',TabUnderlineSelect:{ backgroundColor:'white',height:2,TabUnSelect:{ flex:1,color:'#d5d5d5',TabUnderlineUnSelect:{ height:0,});

总结

这节,我们完成了首页功能的开发,主要涉及到了标题栏、选项卡切换的功能,细节上提到了组件的平台适配、ViewPager的使用等。下一节,我们将开发主界面的功能包括底部TabBar的开发以及Navigator实现页面跳转,而页面跳转将是最主要的一个功能,下一节我们再详细来述说。

猜你在找的React相关文章