react-native-tab-navigator组件的基本使用示例代码

前端之家收集整理的这篇文章主要介绍了react-native-tab-navigator组件的基本使用示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p style="text-align: left">要做的效果很简单,如下图所示:


<p style="text-align: center">

使用基本教程

1.引入组件

nofollow" target="_blank" href="https://github.com/happypancake/react-native-tab-navigator">Github上的地址

2.render方法中返回:

} renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: '电影' })}> // 这里放入页面组件 } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: '音乐' })}> } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: '图书' })}> } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: '我的' })}> ); }

引入页面组件:

设置state状态机:

引入基本样式:

这个时候效果已经出来了,我们继续抽象组件:

将每一个栏目抽出来放到一个统一的方法中:

} renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: selectedTab })} > )

}

此时,render方法中就直接引用四个方法即可:

{this._renderTabarItems('电影',require('../img/movie_gray.png'),require('../img/movie_red.png'),MoviePage)} {this._renderTabarItems('音乐',require('../img/music_gray.png'),require('../img/music_red.png'),MusicPage)} {this._renderTabarItems('图书',require('../img/book_gray.png'),require('../img/book_red.png'),BookPage)} {this._renderTabarItems('我的',require('../img/my_gray.png'),require('../img/my_red.png'),MyPage)} ); }

至此,已经初步完成。

组件的属性集合:

Props

TabNavigator props

prop default type description 属性应该用处不大效果

TabNavigator.Item props

prop default type description 提示文字,可为String或Number,类似QQ中Tab右上角的消息提示,非必填提示角标渲染方式,function类型,类似render的使用,非必填标题,String类型,非必填标题样式,style类型,非必填标题样式,style类型,非必填函数,这里需要控制的是state

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章