Explication détaillée de l'utilisation de TabBarIOS

Cette fois, je vous apporte une explication détaillée de l'utilisation de TabBarIOS. Quelles sont les précautions lors de l'utilisation de TabBarIOS. Voici des cas réels, jetons un coup d'œil.

import React, { Component } from 'react';
import {
 StyleSheet,
 View,
 TabBarIOS,
 NavigatorIOS,
 Navigator,
 AppRegistry,
 Image,
 TouchableHighlight,
 Platform,
} from 'react-native';
//首先导入需要的组件
import Home from './home';
import About from './about';
import Manager from './manager';
import Message from './message';
//这里是导入需要显示的页面
export default class Test extends Component {
 constructor(props){
   super(props);
   this.state = {
    selectedTab:'home',
    data:'',
    isLoadingShow: false,
    title:'首页',
   };
  }
//设置一个初始化默认首先显示首页
componentDidMount() {
 console.log("++++++++++++++++TabBarIOS测试+++++++++++++++");
 }
_selectTab(tabName) {
 this.setState({
  selectedTab: tabName
 });
 }
//修改底部Tab名称,通过状态进行控制
_selectTitle(title) {
 this.setState({
  title: title
 });
 }
//修改顶部导航栏的名称,与Tab名称的修改是同步的
_addNavigator(component, title) {
 let data = null;
 if(title === '公告'){
  data = this.state.data;
 }
 return <NavigatorIOS
  style={{flex:1}}
  barTintColor=&#39;#007AFF&#39;
  titleTextColor="#fff"
  tintColor="#fff"
  translucent={false}
  initialRoute={{
   component,
   title,
   passProps:{
   data
   }
  }}
  />;
 }
//这里定义了一个_addNavigator方法,接收两个参数页面名称与导航栏title
_mainJudge(){
  return(
   <View style={{flex:1}}>
    <TabBarIOS barTintColor="#FFF">
    <TabBarIOS.Item
     icon={require(&#39;../imgs/phone_s.png&#39;)}
     title="首页"
     selected={this.state.selectedTab === &#39;home&#39;}
     onPress={this._selectTab.bind(this, &#39;home&#39;)}
     >
     {this._addNavigator(Home, '首页')}
    </TabBarIOS.Item>
    <TabBarIOS.Item
     title="公告"
     icon={require(&#39;../imgs/gonggao.png&#39;)}
     selected={this.state.selectedTab === &#39;message&#39;}
     onPress={this._selectTab.bind(this, &#39;message&#39;)}
     >
     {this._addNavigator(Message, '公告')}
    </TabBarIOS.Item>
    <TabBarIOS.Item
     title="管理"
     icon={require(&#39;../imgs/manager.png&#39;)}
     selected={this.state.selectedTab === &#39;manager&#39;}
     onPress={this._selectTab.bind(this, &#39;manager&#39;)}
     >
     {this._addNavigator(Manager, '管理')}
    </TabBarIOS.Item>
    <TabBarIOS.Item
     title="关于"
     icon={require(&#39;../imgs/about.png&#39;)}
     selected={this.state.selectedTab === &#39;about&#39;}
     onPress={this._selectTab.bind(this, &#39;about&#39;)}
     >
     {this._addNavigator(About, '关于')}
    </TabBarIOS.Item>
    </TabBarIOS>
   </View> 
   )
}
//_mainJudge方法是最核心的方法,用于对底部Tab以及顶部Title的布局,其中调用了几个方法上面已经做了说明.
 render() {
 return (
  <View style={styles.container}>
   {this._mainJudge()}
  </View>
 );
 }
}
const styles = StyleSheet.create({
 container:{
 flex:1,
 opacity:1
 },
});

Comme le montre la figure, le gestionnaire d'importation importé depuis './manager' ; le contenu de la page Manager sera affiché sur la page, et il en va de même pour les autres pages

. Habituellement, lorsque vous entrez dans une telle page, vous accédez à cette page à partir de la page de connexion, ou vous la présentez sous forme de sous-page. Un autre avantage est que, en prenant mon projet comme exemple, cliquez pour changer le mot de passe, et il sera affiché comme. ci-dessous :

Vous verrez que la gestion se déplacera automatiquement vers la gauche, et le titre sera modifié pour changer de mot de passe. Cela évite de devoir définir un code redondant généré par une barre de navigation sur chaque page

. Si vous souhaitez obtenir cet effet vous-même, il vous suffit de créer un nouveau projet,

d'ajouter une page et d'y copier mon code Remarque : j'ai importé quatre pages, vous devez également le faire vous-même. Définition. , vous pouvez simplement créer quelques pages pour essayer.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!