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

更新时间：2017年09月07日 14:23:37 作者：随遇而安_2750

本篇文章主要介绍了react-native-tab-navigator组件的基本使用示例代码，具有一定的参考价值，有兴趣的可以了解一下

要做的效果很简单，如下图所示：

使用基本教程

1.引入组件

import TabNavigator from 'react-native-tab-navigator';

Github上的地址

2.render方法中返回：

render() { 
  return ( 
   <View style={styles.container} > 
    <TabNavigator> 
     <TabNavigator.Item 
      selected={this.state.selectedTab === '电影'} 
      title="电影" 
      titleStyle={styles.tabText} 
      selectedTitleStyle={styles.selectedTabText} 
      renderIcon={() => <Image style={styles.icon} source={require("../images/movie_gray.png")} />} 
      renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/movie_red.png")} />} 
      onPress={() => this.setState({ selectedTab: '电影' })}> 
      <MoviePage/> // 这里放入页面组件
     </TabNavigator.Item> 
     <TabNavigator.Item 
      selected={this.state.selectedTab === '音乐'} 
      title="音乐" 
      titleStyle={styles.tabText} 
      selectedTitleStyle={styles.selectedTabText} 
      renderIcon={() => <Image style={styles.icon} source={require("../images/music_gray.png")} />} 
      renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/music_red.png")} />} 
      onPress={() => this.setState({ selectedTab: '音乐' })}> 
      <MusicPage /> 
     </TabNavigator.Item> 
     <TabNavigator.Item 
      selected={this.state.selectedTab === '图书'} 
      title="图书" 
      titleStyle={styles.tabText} 
      selectedTitleStyle={styles.selectedTabText} 
      renderIcon={() => <Image style={styles.icon} source={require("../images/book_gray.png")} />} 
      renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/book_red.png")} />} 
      onPress={() => this.setState({ selectedTab: '图书' })}> 
      <BookPage /> 
     </TabNavigator.Item> 
     <TabNavigator.Item 
      selected={this.state.selectedTab === '我的'} 
      title="我的" 
      titleStyle={styles.tabText} 
      selectedTitleStyle={styles.selectedTabText} 
      renderIcon={() => <Image style={styles.icon} source={require("../images/my_gray.png")} />} 
      renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/my_red.png")} />} 
      onPress={() => this.setState({ selectedTab: '我的' })}> 
      <MyPage /> 
     </TabNavigator.Item> 
    </TabNavigator> 
   </View> 
  ); 
 }

引入页面组件：

import MoviePage from './pages/MoviePage';
import MusicPage from './pages/MusicPage';
import BookPage from './pages/BookPage';
import MyPage from './pages/MyPage';

设置state状态机：

constructor(props){
 super(props);
 this.state = {
  selectedTab:'电影'
 }
}

引入基本样式：

const styles = StyleSheet.create({
 container:{
 flex:1,
 backgroundColor:'#fff'
 },
 tabText:{
 color:'#000000',
 fontSize:10
 },
 selectedTabText:{
 color:'#D81E06'
 },
 icon:{
 width:20,
 height:20
 }
})

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

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

_renderTabarItems(selectedTab,icon,selectedIcon,Component){
 return (
  <TabNavigator.Item
   selected={this.state.selectedTab === selectedTab} 
   title={selectedTab} 
   titleStyle={styles.tabText} 
   selectedTitleStyle={styles.selectedTabText} 
   renderIcon={() => <Image style={styles.icon} source={icon} />} 
   renderSelectedIcon={() => <Image style={styles.icon} source={selectedIcon} />} 
   onPress={() => this.setState({ selectedTab: selectedTab })}
  >
   <Component />
  </TabNavigator.Item>
 )

 }

此时，render方法中就直接引用四个方法即可：

render() {
 return (
  <View style={styles.container}>
  <TabNavigator>
   {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)}
  </TabNavigator>
  </View>
 );
 }

至此，已经初步完成。

组件的属性集合：

Props

TabNavigator props

prop	default	type	description
sceneStyle	inherited	object (style)	场景样式，即Tab页容器的样式，可按View的style设置
tabBarStyle	inherited	object (style)	TabBar的样式，基本也可按照普通的style写法进行设置
tabBarShadowStyle	inherited	object (style)	TabBar阴影的样式，不过对于扁平化的设计，这个属性应该用处不大
hidesTabTouch	false	boolean	bool类型，即是否隐藏Tab按钮的按下效果

TabNavigator.Item props

prop	default	type	description
renderIcon	none	function	即图标，但为function类型，所以这里需要用到Arrow Function
renderSelectedIcon	none	function	选中状态的图标，非必填，也是function类型
badgeText	none	string or number	即Tab右上角的提示文字，可为String或Number，类似QQ中Tab右上角的消息提示，非必填
renderBadge	none	function	提示角标渲染方式，function类型，类似render的使用，非必填
title	none	string	标题，String类型，非必填
titleStyle	inherited	style	标题样式，style类型，非必填
selectedTitleStyle	none	style	选中标题样式，style类型，非必填
tabStyle	inherited	style	styling for tab
selected	none	boolean	bool型，是否选中状态，可使用setState进行控制，默认false
onPress	none	function	即点击事件的回调函数，这里需要控制的是state
allowFontScaling	false	boolean	bool型，是否允许字体缩放，默认false

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

您可能感兴趣的文章:

React-Native中props具体使用详解
本篇文章主要介绍了React-Native中props具体使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
React路由封装的实现浅析
路由是React项目中相当重要的概念，对于功能较为复杂的网页来说，必然会涉及到不同功能间的页面跳转，本篇文章将对React官方维护的路由库React-Router-Dom的使用和常用组件进行讲解，同时对路由组件传递param参数的方式进行讲解，希望对各位读者有所参考
2022-08-08
React配置子路由的实现
本文主要介绍了React配置子路由的实现，我们来通过一个简单的例子解释一下如何配置子路由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
React使用highlight.js Clipboard.js实现代码高亮复制
这篇文章主要为大家介绍了React使用highlight.js Clipboard.js实现代码高亮复制功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
React+CSS 实现绘制竖状柱状图
这篇文章主要介绍了React+CSS 实现绘制竖状柱状图，文章围绕主题展开详细的内容介绍。具有一定的参考价值，需要的朋友可以参考一下
2022-09-09
React如何避免子组件无效刷新
这篇文章主要介绍了React几种避免子组件无效刷新的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React Native 截屏组件的示例代码
本篇文章主要介绍了React Native 截屏组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
记一个React.memo引起的bug
memo可以自己决定是否更新，但它是一个函数组件而非一个类，本文主要介绍了React.memo引起的bug，具有一定的参考价值，感兴趣的可以了解一下
2022-03-03
React Hook 父子组件相互调用函数方式
这篇文章主要介绍了React Hook 父子组件相互调用函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
React实现动效弹窗组件
最近在使用react开发项目，遇到这样一个需求实现一个带有动效的 React 弹窗组件，如果不考虑动效，很容易实现，接下来小编通过本文给大家介绍React实现动效弹窗组件的实现代码，一起看看吧
2021-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具