欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React Native中TabBarIOS的簡單使用方法示例

 更新時間:2017年10月13日 09:32:49   作者:Hank_謝旱  
最近在學(xué)習(xí)過程中遇到了很多問題,TabBarIOS的使用就是一個,所以下面這篇文章主要給大家介紹了關(guān)于React Native中TabBarIOS簡單使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下。

前言

大家應(yīng)該都知道,TabBarIOS是RN中自帶的組件,可直接使用,不用引用第三方組件,下面講解TabBarIOS的使用方法,話不多說了,來一起看看詳細的介紹吧。

首先看一下效果圖,如下圖所示:


效果圖

看完效果圖再對代碼進行說明.

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è)置一個初始化默認首先顯示首頁
componentDidMount() {
 console.log("++++++++++++++++TabBarIOS測試+++++++++++++++");
 }
_selectTab(tabName) {
 this.setState({
  selectedTab: tabName
 });
 }
//修改底部Tab名稱,通過狀態(tài)進行控制
_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
   }
  }}
  />;
 }
//這里定義了一個_addNavigator方法,接收兩個參數(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)用了幾個方法上面已經(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)容就會顯示在頁面,其余頁面也是同樣的道理.


頁面填充效果圖

通常進入這樣一個頁面都是從登陸頁面跳轉(zhuǎn)到此頁面,或者作為一個子頁面呈現(xiàn).另一個好處就是,拿我的項目為例,點擊修改密碼,顯示如下圖所示:


內(nèi)頁效果圖

你會看到管理會自動移到左邊,title修改為修改密碼.就避免了,每個頁面都需要定義一個導(dǎo)航欄產(chǎn)生的冗余代碼.

如果你想自己完成這樣的效果,你只需新建一個項目,新增一個頁面,將我的代碼拷貝進去即可,注意:我import了四個頁面,這個也需要你自己定義,可簡單創(chuàng)建幾個頁面嘗試.

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

相關(guān)文章

  • React之Hooks詳解

    React之Hooks詳解

    這篇文章主要介紹了React hooks的優(yōu)缺點詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下, 希望能夠給你帶來幫助
    2021-09-09
  • Vite+React+TypeScript手擼TodoList的項目實踐

    Vite+React+TypeScript手擼TodoList的項目實踐

    本文主要介紹了Vite+React+TypeScript手擼TodoList的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-05-05
  • 解決React報錯Expected?`onClick`?listener?to?be?a?function

    解決React報錯Expected?`onClick`?listener?to?be?a?function

    這篇文章主要為大家介紹了React報錯Expected?`onClick`?listener?to?be?a?function解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • React 數(shù)據(jù)獲取條件競爭原理解析

    React 數(shù)據(jù)獲取條件競爭原理解析

    這篇文章主要為大家介紹了React 數(shù)據(jù)獲取條件競爭原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • ReactNative集成個推消息推送過程詳解

    ReactNative集成個推消息推送過程詳解

    這篇文章主要為大家介紹了ReactNative集成個推消息推送過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • React-Router(V6)的權(quán)限控制實現(xiàn)示例

    React-Router(V6)的權(quán)限控制實現(xiàn)示例

    本文主要介紹了React-Router(V6)的權(quán)限控制實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • React Zustand狀態(tài)管理庫的使用詳解

    React Zustand狀態(tài)管理庫的使用詳解

    Zustand是一個為React和瀏覽器環(huán)境設(shè)計的輕量級狀態(tài)管理庫,由Vercel開發(fā),它特點包括輕量級、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項目,Zustand還支持TypeScript,提供類型安全的支持
    2024-09-09
  • React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法

    React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法

    這篇文章主要介紹了React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法,文中通過代碼示例介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-09-09
  • react 原生實現(xiàn)頭像滾動播放的示例

    react 原生實現(xiàn)頭像滾動播放的示例

    這篇文章主要介紹了react 原生實現(xiàn)頭像滾動播放的示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • react學(xué)習(xí)筆記之state以及setState的使用

    react學(xué)習(xí)筆記之state以及setState的使用

    這篇文章主要介紹了react學(xué)習(xí)筆記之state以及setState的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12

最新評論