react-native-tab-navigator組件的基本使用示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:30:41

react-native-tab-navigator組件的基本使用示例代碼

react-native-tab-navigator組件的基本使用示例代碼:要做的效果很簡單，如下圖所示：使用基本教程 1.引入組件 import TabNavigator from 'react-native-tab-navigator'; Github上的地址 2.render方法中返回： render() { return ( <View style={styles.con

推薦度：

點擊下載本文 文檔為doc格式

導讀react-native-tab-navigator組件的基本使用示例代碼:要做的效果很簡單，如下圖所示：使用基本教程 1.引入組件 import TabNavigator from 'react-native-tab-navigator'; Github上的地址 2.render方法中返回： render() { return ( <View style={styles.con

要做的效果很簡單，如下圖所示：

使用基本教程

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

react-native-tab-navigator組件的基本使用示例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：代碼的使用 tab

熱門焦點

react-native-tab-navigator組件的基本使用示例代碼

react-native-tab-navigator組件的基本使用示例代碼

react-native-tab-navigator組件的基本使用示例代碼

最新推薦

猜你喜歡

熱門推薦