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-tab-navigator组件的基本使用示例代码到此结束。真正成功的人生，不在于成就的大小，而在于你是否努力地去实现自我，喊出自我的声音，走出属于自我的道路。小编再次感谢大家对我们的支持！

全站频道

大家都在搜索：