Ausführliche Erklärung zur Verwendung von TabBarIOS

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen bei der Verwendung von TabBarIOS zu beachten sind. Schauen wir uns die folgenden Fälle an.

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
 },
});

Wie in der Abbildung gezeigt, wird der importierte Manager aus „./manager“ auf der Seite angezeigt, und das Gleiche gilt für andere Seiten

Wenn Sie eine solche Seite aufrufen, springen Sie normalerweise von der Anmeldeseite zu dieser Seite oder stellen sie als Unterseite dar. Ein weiterer Vorteil besteht darin, dass Sie, wenn Sie mein Projekt als Beispiel nehmen, auf klicken, um das Passwort zu ändern, und es wird als angezeigt unten dargestellt:

Sie werden sehen, dass die Verwaltung automatisch nach links verschoben wird und der Titel geändert wird, um das Passwort zu ändern. Dadurch entfällt die Notwendigkeit, auf jeder Seite einen redundanten Code zu definieren Wenn Sie diesen Effekt selbst erzielen möchten, müssen Sie nur ein neues Projekt erstellen, eine

Seite hinzufügen und meinen Code hineinkopieren. Hinweis: Ich habe vier Seiten importiert, Sie müssen dies auch selbst tun Definition , Sie können einfach ein paar Seiten erstellen, um es auszuprobieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website. Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von TabBarIOS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!