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" } ,
] ;

構成 - 小道具

財産	タイプ	デフォルト	説明
タブ	配列	オブジェクト配列	上記のようにフォーマットされた例でオブジェクト配列を設定する必要があります
イニシャル	番号	ヌル	デフォルトの選択されたタブ
オンプレス	関数	デフォルト	タブが押されたら、独自のロジックを設定します
onchange	関数	デフォルト	選択したタブが変更されたら、独自のロジックを設定します
tabwith	番号	60	各タブの幅値を変更します
Tabpadding	番号	5	各タブのパディング値を変更します
ShadowStyle	スタイル	影	選択したタブに独自のシャドウスタイルを設定します
シャドウコラー	色	＃757575	現在の影の色を変更します
ActiveColor	色	＃fbd000	選択したタブの色を変更します
inactiveColor	色	透明	選択されていないタブの色を変更します
ActiveTextColor	色	#fff	選択したタブのテキスト色を変更します
inactiveTextcolor	色	＃000	選択されていないタブのテキスト色を変更します
容器	成分	ビュー	メインコンテナのコンポーネントタイプを変更します
スタイル	スタイル	デフォルト	メインコンテナのスタイルオブジェクトを変更またはオーバーライドします

将来の計画

• ライセンス
• 点線のタブバーコンポーネントオプション
• アニメーション
• タイプスクリプトチャレンジ！
• Libに関する記事を媒体に書いてください

クレジット

Sina Amiriyamに触発されたデザイン

著者

Freakycoder、[email protected]

ライセンス

MITライセンスの下で、ネイティブネイティブタブバーが利用できます。詳細については、ライセンスファイルを参照してください。