react native tab bars

설치

종속성 추가 :

 npm i react - native - tab - bars 

피어 의존성

중요한! 설치해야합니다

 "react" : ">= 16.x.x" ,
"react-native" : ">= 0.55.x" ,
"react-native-androw" : ">= 0.0.34"

용법

수입

 import { SolidTabBar } from "react-native-tab-bars" ; 

용법

 < SolidTabBar
  initial = { 0 }
  onChange = { ( data ) => console . log ( data ) }
  tabs = { [
    { id : 0 , text : "All" } ,
    { id : 1 , text : "Birds" } ,
    { id : 2 , text : "Fishes" } ,
    { id : 3 , text : "Tigers" } ,
  ] }
/> 

탭 객체 배열 형식

 [
  { id : 0 , text : "All" } ,
  { id : 1 , text : "Birds" } ,
  { id : 2 , text : "Fishes" } ,
  { id : 3 , text : "Tigers" } ,
] ;

구성 - 소품

재산	유형	기본	설명
탭	정렬	객체 배열	위와 같이 서식 된 예제로 객체 배열을 설정해야합니다.
초기의	숫자	널	기본값 선택한 탭
onpress	기능	기본	탭을 누르면 자신의 논리를 설정하십시오
onchange	기능	기본	선택한 탭이 변경 될 때 자신의 논리를 설정하십시오
탭	숫자	60	각 탭의 너비 값을 변경하십시오
타파딩	숫자	5	각 탭의 패딩 값을 변경하십시오
섀도우 스타일	스타일	그림자	선택한 탭에 대해 나만의 그림자 스타일을 설정하십시오
ShadowColor	색상	#757575	현재 그림자 색상을 변경하십시오
ActiveColor	색상	#FBD000	선택한 탭의 색상을 변경하십시오
inactivecolor	색상	투명한	선택되지 않은 탭의 색상을 변경하십시오
ActiveTextColor	색상	#fff	선택한 탭의 텍스트 색상을 변경하십시오
inactiveTextColor	색상	#000	선택하지 않은 탭의 텍스트 색상을 변경하십시오
컨테이너	요소	보다	기본 컨테이너의 구성 요소 유형을 변경하십시오
스타일	스타일	기본	기본 컨테이너의 스타일 객체를 변경하거나 무시합니다

미래 계획

• 특허
• 점선 탭 막대 구성 요소 옵션
• 생기
• 타입 스크립트 도전!
• 매체에 Lib에 관한 기사를 작성하십시오

크레딧

Sina Amiriyam에서 영감을 얻은 디자인

작가

freakycoder, [email protected]

특허

React Native Tab Bars는 MIT 라이센스로 제공됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.