React Native中TabBarIOS的簡單使用方法示例
前言
大家應(yīng)該都知道,TabBarIOS是RN中自帶的組件,可直接使用,不用引用第三方組件,下面講解TabBarIOS的使用方法,話不多說了,來一起看看詳細(xì)的介紹吧。
首先看一下效果圖,如下圖所示:
效果圖
看完效果圖再對代碼進(jìn)行說明.
import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, TouchableHighlight, Platform, } from 'react-native'; //首先導(dǎo)入需要的組件 import Home from './home'; import About from './about'; import Manager from './manager'; import Message from './message'; //這里是導(dǎo)入需要顯示的頁面 export default class Test extends Component { constructor(props){ super(props); this.state = { selectedTab:'home', data:'', isLoadingShow: false, title:'首頁', }; } //設(shè)置一個(gè)初始化默認(rèn)首先顯示首頁 componentDidMount() { console.log("++++++++++++++++TabBarIOS測試+++++++++++++++"); } _selectTab(tabName) { this.setState({ selectedTab: tabName }); } //修改底部Tab名稱,通過狀態(tài)進(jìn)行控制 _selectTitle(title) { this.setState({ title: title }); } //修改頂部導(dǎo)航欄的名稱,與Tab名稱的修改是同步的 _addNavigator(component, title) { let data = null; if(title === '公告'){ data = this.state.data; } return <NavigatorIOS style={{flex:1}} barTintColor='#007AFF' titleTextColor="#fff" tintColor="#fff" translucent={false} initialRoute={{ component, title, passProps:{ data } }} />; } //這里定義了一個(gè)_addNavigator方法,接收兩個(gè)參數(shù)頁面名稱與導(dǎo)航欄title _mainJudge(){ return( <View style={{flex:1}}> <TabBarIOS barTintColor="#FFF"> <TabBarIOS.Item icon={require('../imgs/phone_s.png')} title="首頁" selected={this.state.selectedTab === 'home'} onPress={this._selectTab.bind(this, 'home')} > {this._addNavigator(Home, '首頁')} </TabBarIOS.Item> <TabBarIOS.Item title="公告" icon={require('../imgs/gonggao.png')} selected={this.state.selectedTab === 'message'} onPress={this._selectTab.bind(this, 'message')} > {this._addNavigator(Message, '公告')} </TabBarIOS.Item> <TabBarIOS.Item title="管理" icon={require('../imgs/manager.png')} selected={this.state.selectedTab === 'manager'} onPress={this._selectTab.bind(this, 'manager')} > {this._addNavigator(Manager, '管理')} </TabBarIOS.Item> <TabBarIOS.Item title="關(guān)于" icon={require('../imgs/about.png')} selected={this.state.selectedTab === 'about'} onPress={this._selectTab.bind(this, 'about')} > {this._addNavigator(About, '關(guān)于')} </TabBarIOS.Item> </TabBarIOS> </View> ) } //_mainJudge方法是最核心的方法,用于對底部Tab以及頂部Title的布局,其中調(diào)用了幾個(gè)方法上面已經(jīng)做了說明. render() { return ( <View style={styles.container}> {this._mainJudge()} </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, opacity:1 }, });
如圖所示,導(dǎo)入的import Manager from './manager';Manager頁面的內(nèi)容就會顯示在頁面,其余頁面也是同樣的道理.
頁面填充效果圖
通常進(jìn)入這樣一個(gè)頁面都是從登陸頁面跳轉(zhuǎn)到此頁面,或者作為一個(gè)子頁面呈現(xiàn).另一個(gè)好處就是,拿我的項(xiàng)目為例,點(diǎn)擊修改密碼,顯示如下圖所示:
內(nèi)頁效果圖
你會看到管理會自動移到左邊,title修改為修改密碼.就避免了,每個(gè)頁面都需要定義一個(gè)導(dǎo)航欄產(chǎn)生的冗余代碼.
如果你想自己完成這樣的效果,你只需新建一個(gè)項(xiàng)目,新增一個(gè)頁面,將我的代碼拷貝進(jìn)去即可,注意:我import了四個(gè)頁面,這個(gè)也需要你自己定義,可簡單創(chuàng)建幾個(gè)頁面嘗試.
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐
本文主要介紹了Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05解決React報(bào)錯(cuò)Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報(bào)錯(cuò)Expected?`onClick`?listener?to?be?a?function解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法
這篇文章主要介紹了React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09react 原生實(shí)現(xiàn)頭像滾動播放的示例
這篇文章主要介紹了react 原生實(shí)現(xiàn)頭像滾動播放的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04react學(xué)習(xí)筆記之state以及setState的使用
這篇文章主要介紹了react學(xué)習(xí)筆記之state以及setState的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12