React Native 에서 TabBarIOS 의 간단 한 사용 방법 예시

머리말
알다 시 피 TabBarIOS 는 RN 에서 자체 적 으로 가지 고 있 는 구성 요소 로 직접 사용 할 수 있 습 니 다.제3자 구성 요 소 를 인용 하지 않 아 도 됩 니 다.다음은 TabBarIOS 의 사용 방법 을 설명 하 겠 습 니 다.더 이상 할 말 이 없 으 니 상세 한 소 개 를 해 보 겠 습 니 다.
먼저 효과 도 를 보 세 요.다음 그림 과 같 습 니 다.

효과 도
효과 도 를 보고 코드 에 대해 설명 하 세 요.

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='#007AFF'
  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('../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="  "
     icon={require('../imgs/about.png')}
     selected={this.state.selectedTab === 'about'}
     onPress={this._selectTab.bind(this, 'about')}
     >
     {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
 },
});

그림 에서 보 듯 이 가 져 온 import Manager from'./manager';Manager 페이지 의 내용 이 페이지 에 표시 되 고 나머지 페이지 도 마찬가지 입 니 다.

페이지 충전 효과 도
보통 이 페이지 에 들 어가 면 로그 인 페이지 에서 이 페이지 로 넘 어가 거나 하위 페이지 로 보 여 줍 니 다.또 다른 장점 은 제 항목 을 예 로 들 어 비밀 번 호 를 수정 하려 면 다음 그림 과 같이 표시 하 는 것 입 니 다.

내부 효과 도
관리 가 자동 으로 왼쪽으로 이동 하 는 것 을 볼 수 있 습 니 다.title 은 비밀 번 호 를 수정 하 는 것 으로 바 뀌 었 습 니 다.모든 페이지 는 네 비게 이 션 표시 줄 에서 발생 하 는 불필요 한 코드 를 정의 해 야 합 니 다.
만약 당신 이 이러한 효 과 를 완성 하고 싶다 면,당신 은 하나의 항목 을 새로 만 들 고,하나의 페이지 를 추가 하고,나의 코드 를 복사 하면 됩 니 다.주의:나 는 import 네 개의 페이지 를 만 들 었 습 니 다.이것 도 당신 이 정의 해 야 합 니 다.몇 개의 페이지 를 간단하게 만 들 수 있 습 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.