react-native-tab-navigator 구성 요소 의 기본 사용 예시 코드

다음 그림 과 같이 해 야 할 효 과 는 매우 간단 하 다.

기본 튜 토리 얼 사용
1.구성 요소 도입

import TabNavigator from 'react-native-tab-navigator';

Github 의 주소
2.render 방법 으로 되 돌아 가기:

render() { 
  return ( 
   <View style={styles.container} > 
    <TabNavigator> 
     <TabNavigator.Item 
      selected={this.state.selectedTab === '  '} 
      title="  " 
      titleStyle={styles.tabText} 
      selectedTitleStyle={styles.selectedTabText} 
      renderIcon={() => <Image style={styles.icon} source={require("../images/movie_gray.png")} />} 
      renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/movie_red.png")} />} 
      onPress={() => this.setState({ selectedTab: '  ' })}> 
      <MoviePage/> //         
     </TabNavigator.Item> 
     <TabNavigator.Item 
      selected={this.state.selectedTab === '  '} 
      title="  " 
      titleStyle={styles.tabText} 
      selectedTitleStyle={styles.selectedTabText} 
      renderIcon={() => <Image style={styles.icon} source={require("../images/music_gray.png")} />} 
      renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/music_red.png")} />} 
      onPress={() => this.setState({ selectedTab: '  ' })}> 
      <MusicPage /> 
     </TabNavigator.Item> 
     <TabNavigator.Item 
      selected={this.state.selectedTab === '  '} 
      title="  " 
      titleStyle={styles.tabText} 
      selectedTitleStyle={styles.selectedTabText} 
      renderIcon={() => <Image style={styles.icon} source={require("../images/book_gray.png")} />} 
      renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/book_red.png")} />} 
      onPress={() => this.setState({ selectedTab: '  ' })}> 
      <BookPage /> 
     </TabNavigator.Item> 
     <TabNavigator.Item 
      selected={this.state.selectedTab === '  '} 
      title="  " 
      titleStyle={styles.tabText} 
      selectedTitleStyle={styles.selectedTabText} 
      renderIcon={() => <Image style={styles.icon} source={require("../images/my_gray.png")} />} 
      renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/my_red.png")} />} 
      onPress={() => this.setState({ selectedTab: '  ' })}> 
      <MyPage /> 
     </TabNavigator.Item> 
    </TabNavigator> 
   </View> 
  ); 
 }

페이지 구성 요소 도입:

import MoviePage from './pages/MoviePage';
import MusicPage from './pages/MusicPage';
import BookPage from './pages/BookPage';
import MyPage from './pages/MyPage';

state 상태 기 설정:

constructor(props){
 super(props);
 this.state = {
  selectedTab:'  '
 }
}

기본 스타일 도입:

const styles = StyleSheet.create({
 container:{
 flex:1,
 backgroundColor:'#fff'
 },
 tabText:{
 color:'#000000',
 fontSize:10
 },
 selectedTabText:{
 color:'#D81E06'
 },
 icon:{
 width:20,
 height:20
 }
})

이때 효과 가 나 왔 습 니 다.우 리 는 추상 적 인 구성 요 소 를 계속 합 니 다.
각 항목 을 추출 하여 하나의 통 일 된 방법 에 넣 습 니 다.

_renderTabarItems(selectedTab,icon,selectedIcon,Component){
 return (
  <TabNavigator.Item
   selected={this.state.selectedTab === selectedTab} 
   title={selectedTab} 
   titleStyle={styles.tabText} 
   selectedTitleStyle={styles.selectedTabText} 
   renderIcon={() => <Image style={styles.icon} source={icon} />} 
   renderSelectedIcon={() => <Image style={styles.icon} source={selectedIcon} />} 
   onPress={() => this.setState({ selectedTab: selectedTab })}
  >
   <Component />
  </TabNavigator.Item>
 )

 }

이때 render 방법 에서 네 가지 방법 을 직접 인용 하면 됩 니 다.

render() {
 return (
  <View style={styles.container}>
  <TabNavigator>
   {this._renderTabarItems('  ',require('../img/movie_gray.png'),require('../img/movie_red.png'),MoviePage)}
   {this._renderTabarItems('  ',require('../img/music_gray.png'),require('../img/music_red.png'),MusicPage)}
   {this._renderTabarItems('  ',require('../img/book_gray.png'),require('../img/book_red.png'),BookPage)}
   {this._renderTabarItems('  ',require('../img/my_gray.png'),require('../img/my_red.png'),MyPage)}
  </TabNavigator>
  </View>
 );
 }

이로써 이미 초보 적 으로 완성 되 었 다.
구성 요소 의 속성 집합:
Props
TabNavigator props
prop
default
type
description
sceneStyle
inherited
object (style)
필드 스타일,즉 Tab 페이지 용기 스타일,View 의 style 에 따라 설정 할 수 있 습 니 다.
tabBarStyle
inherited
object (style)
TabBar 의 스타일 은 기본적으로 일반적인 스타일 로 설정 할 수 있 습 니 다.
tabBarShadowStyle
inherited
object (style)
TabBar 음영 의 스타일 이지 만 평면 화 된 디자인 에 있어 서 이 속성 은 쓸모 가 없 을 것 입 니 다.
hidesTabTouch
false
boolean
bool 형식,Tab 단 추 를 누 르 는 효 과 를 숨 길 지 여부 입 니 다.
TabNavigator.Item props
prop
default
type
description
renderIcon
none
function
아이콘 이지 만 function 형식 이기 때문에 Arrow Function 을 사용 해 야 합 니 다.
renderSelectedIcon
none
function
선택 한 상태 아이콘,필수 가 아 닌 function 형식 입 니 다.
badgeText
none
string or number
즉,Tab 오른쪽 상단 에 있 는 알림 문 자 는 String 이나 Number 입 니 다.QQ 의 Tab 오른쪽 상단 에 있 는 메시지 알림 과 같 습 니 다.필요 하지 않 습 니 다.
renderBadge
none
function
프롬프트 커서 렌 더 링 방식,function 형식,render 와 유사 한 사용,필요 하지 않 음
title
none
string
제목
titleStyle
inherited
style
제목 스타일
selectedTitleStyle
none
style
제목 스타일,style 형식 을 선택 하 십시오.
tabStyle
inherited
style
styling for tab
selected
none
boolean
bool 형,상태 선택 여부,setState 로 제어 가능,기본 false
onPress
none
function
이벤트 의 반전 함 수 를 누 르 면 state 를 제어 해 야 합 니 다.
allowFontScaling
false
boolean
bool 형,글꼴 크기 조정 허용 여부,기본 false
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.