「ReactNavigation3xシリーズチュートリアル」createBottomTabNavigator開発ガイド
React Navigation 3x Series Tutorialcreatebottomtabnavigator Development Guide
createBottomTabNavigator iOSのTabBarControllerと同等で、画面下部のタブバーです。図：
createBottomTabNavigator API
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):
RouteConfigs（必須）：ルート構成オブジェクトは、ルート名からルート構成へのマッピングであり、ナビゲーターにルートが何であるかを通知します。BottomTabNavigatorConfig（オプション）：ナビゲーターのルート（デフォルトの最初の画面、navigationOptions、パスなど）スタイル（遷移モードモード、ヘッドモードなど）を構成します。
createBottomTabNavigator API createBottomTabNavigator Support through RouteConfigs with BottomTabNavigatorConfig createBottomTabNavigatorナビゲーターを作成するための2つのパラメーターから確認できます。
RouteConfigs
RouteConfigsは、3つのパラメーターscreen、pathおよびnavigationOptions;をサポートします。
screen（必須）：画面のメイン表示コンテンツとしてReactコンポーネントを指定します。このコンポーネントがTabNavigatorによってロードされると、anavigationが割り当てられます。小道具。path（オプション）：スキーマジャンプの使用をサポートするように設定するために使用されます。特定の使用は以下に関連しますSchemaこの章で説明したようにnavigationOptions（オプション）：title、headerRight、headerLeftなどのグローバル画面ナビゲーションオプションを構成するために使用されます。
BottomTabNavigatorConfig
- tabBarComponent：iOS
TabBarBottomのデフォルトに指定されていない場合、createBottomTabNavigatorのTabBarコンポーネントを指定し、AndroidプラットフォームTabBarTopでデフォルトで使用されます。TabBarBottom対TabBarTopすべてreact-navigationサポートされているコンポーネント。TabBarをカスタマイズしてこれら2つのコンポーネントを書き換えたり、必要に応じて自分で実装したりできます。
- tabBarOptions：TaBarの構成については、以下で詳しく説明します。
- initialRouteName：デフォルトのページコンポーネント、createBottomTabNavigatorによって表示される最初のページ
- 順序：タブの順序を定義するrouteNamesの配列。
- パス：routeConfigsで設定されたパスをオーバーライドするpathconfigへのrouteNameのマップを提供します。
- backBehavior：戻るボタンを押すと、ラベルが最初のタブに切り替わりますか？はいの場合は、初期タブに切り替えるように設定します。それ以外の場合は、何もしません。デフォルトでは、初期タブに切り替えます。
tabBarOptions（タブ構成）
- activeTintColor：TabBarが選択された状態のラベルとアイコンの色を設定します
- activeTintColor：TabBarが選択されていない状態のラベルとアイコンの色を設定します
- showIcon：アイコンを表示するかどうか、デフォルトはfalseです
- showLabel：ラベルを表示するかどうか、デフォルトはtrueです
- upperCaseLabel-ラベルを大文字にするかどうか、デフォルトはtrueです。
- tabStyle：単一のタブのスタイルを設定します
- IndicatorStyle：インジケーターのスタイルを設定します（タブの下の行）
- labelStyle：TabBarタグのスタイルを設定します
- iconStyle：アイコンのスタイルを設定します
- スタイル：TabBar全体のスタイルを設定します
- allowFontScaling：TabBarタグがスケーリングをサポートするかどうかを設定します。これはデフォルトでサポートされています。
- safeAreaInset：オーバーライドforceInsetプロパティ、デフォルトは{bottom： ‘always’、top： ‘never’}、オプション値：top |下|左|右（「常に」|「決して」）
例えば：
tabBarOptions: { labelStyle: { fontSize: 12, }, tabStyle: { width: 100, }, style: { backgroundColor: 'blue', }, } NavigationOptions（画面ナビゲーションオプション）
createBottomTabNavigatorでサポートされている画面ナビゲーションオプションのパラメーターは次のとおりです。
- タイトル：headerTitleおよびtabBarLabelの代替の一般的なタイトルとして使用できます。
- tabBarVisible：デフォルトで表示されるTabBarを表示または非表示にします
- tabBarIcon：TabBarのアイコンを設定します
- tabBarLabel：TabBarのラベルを設定します
- tabBarOnPress：Tabはコールバック関数と呼ばれ、その引数は変数オブジェクトの保証です。
- ナビゲーション：ナビゲーション小道具；
- defaultHandler：タブプレスのデフォルトハンドラー
- tabBarButtonComponent：アイコンとラベルをラップしてonPressを実装するReactコンポーネント。デフォルトでは、これはTouchableWithoutFeedbackのラッパーであり、他のクリック可能なコンポーネントと同じようにレンダリングされます。 TabBarButtonComponent：TouchableOpacityはTouchableOpacityに置き換えられます
- tabBarAccessibilityLabel：タブボタンの補助関数ラベル。ユーザーがタグをクリックすると、スクリーンリーダーが情報を読み上げます。タブ用のタブがない場合は、これを設定することをお勧めします
- tabBarTestID：テストでタブボタンを見つけるために使用されるID
[ケース1] createBottomTabNavigatorを使用して、インターフェイスをナビゲートし、navigationOptionsを構成します
ステップ1：タイプcreateBottomTabNavigatorのナビゲーターを作成します
export const AppTabNavigator = createBottomTabNavigator({ Page1: { screen: Page1, navigationOptions: { tabBarLabel: 'Page1', tabBarIcon: ({tintColor, focused}) => ( ), } }, Page2: { screen: Page2, navigationOptions: { tabBarLabel: 'Page2', tabBarIcon: ({tintColor, focused}) => ( ), } }, Page3: { screen: Page3, navigationOptions: { tabBarLabel: 'Page3', tabBarIcon: ({tintColor, focused}) => ( ), } }, }, { tabBarComponent: TabBarComponent, tabBarOptions: { activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff', } }) ステップ2：navigationOptionsを構成します。
TabNavigatorのnavigationOptionsには、tabBarLabelタグとtabBarIconアイコンの2つの主要なプロパティがあります。
Page2: { screen: Page2, navigationOptions: { tabBarLabel: 'Page2', tabBarIcon: ({tintColor, focused}) => ( ), } }, 上記のコードで使用react-native-vector-iconsベクターアイコンはタブの表示アイコンとして機能し、tabBarIconは必要に応じてカスタマイズできるReactコンポーネントを受け取ります。
- tintColor：現在の状態のタブの色
- フォーカス：タブが選択されているかどうか
3番目のステップ：インターフェースジャンプ
const {navigation} = this.props ... { navigation.navigate('Page3',{ name: 'Devio' }) }} /> { navigation.goBack() }} /> コード解析：
ページジャンプは2つのステップに分けることができます。
-
- ナビゲーションを取得する：
const {navigation} = this.props -
- by
navigate(routeName, params, action)ページをジャンプさせる：
navigation.navigate('Page2') navigation.navigate('Page3',{ name: 'Devio' })これがジャンプ先です
Page3パラメータを渡しました{ name: 'Devio' }； - by
ステップ4：ページパラメータを更新して戻る
export default class Page1 extends React.Component { //You can also define the navigation properties of each page here, the definition here will override the definitions elsewhere. // static navigationOptions = { // title: 'Page1', // } render() { const {navigation} = this.props return Welcome to Page1 { navigation.goBack() }} /> { navigation.setParams({theme:{ tintColor:'orange', updateTime:new Date().getTime() }}) }} /> { navigation.navigate('Page2') }} /> } } コード解析：
上記のコードを渡します。
{ navigation.setParams({theme:{ tintColor:'orange', updateTime:new Date().getTime() }}) }} /> 現在のテーマを更新すると、[テーマの色を変更]ボタンをクリックすると、TabBarの色が変更されます。
ユーザーがクリックしたときGo Backボタンが押されたとき、次を渡します。
navigation.goBack() デフォルトのタブへの復帰を実装しました。
[高度なケース] react-navigationの高度なアプリケーション
react-navigationを使用する場合、次のような単純な構成では解決できない要件がいくつかあります。
- 動的構成createBottomTabNavigator：公式は、TabNavigatorのページの静的構成のみを提供します。 TabNavigatorのページが固定されておらず、動的に生成する必要がある場合、何をする必要がありますか？
- createBottomTabNavigatorのスタイルを動的に構成する：表示されるテキストの変更、フォントの色の変更、アイコンの変更などの公式ドキュメントを使用して、TabNavigatorのスタイルを動的に変更することはできません。
- 多層ネストルーティングのパーソナライズ：createdBottomTabNavigatorがラップされた後、ナビゲーションを使用してTabNavigatorのページを外部のStackNavigatorのページにジャンプすることはできません。特にTabNavigatorをカスタマイズする必要がある場合は、多くのアプリケーションシナリオがあります。
- パラメータを初期化します：ページを設定するときにパラメータを渡す方法は？
上記のような多くのアプリケーションシナリオがあり、このチュートリアルで使用できます。 高品質のオンラインアプリビデオチュートリアルを作成するためのReactNative + Reduxの最新バージョン さらなる研究 反応ナビゲーションのためのより高度なアプリケーション 。
- React Navigation3xの使い方を学びながら問題が発生している人は誰でも、次のことができます。 ReactNavigation3xビデオチュートリアル 答えを探しています。
- また、合格することもできます 高品質のオンラインアプリビデオチュートリアルを作成するためのReactNative + Reduxの最新バージョン React Navigation3x開発の実践的な経験とスキル、および最適化のアイデアの詳細をご覧ください。