開発における React-Navigation の使用の概要

この記事で共有する内容は、開発における React-Navigation の使用方法の紹介であり、必要とする友人が参照できるものです。

日常の戯言

react-navigation は、react コミュニティによるナビゲーション ソリューションです。 私の 先輩の React 開発の経験から判断すると、react-native はアプリ開発に必須のライブラリの 1 つであると言っても過言ではありません。 react-native开发app必备库之一毫不过分。

在开发过程中，不同页面因为不同的业务需求会有不同的头部(header)，这篇文章针对几种常用我遇到过的各种header提供对应的react-navigation解决方案。

我是正文

底部tab对app来说是十分常见的需求。react-navigation也提供了相应的API来创建底部tab： createBottomTabNavigator

如何定制tab页的header呢？ 我们分情况讨论：

所有tab页都要header

很简单，无需额外的配置。

所有tab页都不要header

第一时间可能会想到的是在createBottomTabNavigator中对每个页面的navigationOptions对象设置header为null。

createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null // 无效！！
      }
    }
  }
)

但实际上createBottomTabNavigator中的navigationOptions对象是不接受header参数的，至少文档中没写。官方文档

解决方式：在根级导航中设置。

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator, // TabNavigator就是通过createBottomTabNavigator创建的底部导航
      navigationOptions: {
        header: null
      }
    }
    // other pages
  }
)

只有某个tab要header

其实navigator是可以互相嵌套的。 就像上面的例子中，Main路由的页面是createBottomTabNavigator创建的底部导航。同理，底部导航中某个tab的页面也可以是导航页。有点绕，还是看代码

const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        // some options
      }
    },
    User: { // user页要"头"~
      screen: createStackNavigator(
        User: {
          screen: User,
          navigationOptions: {
            header: customHeader
          }
        }
      )
    }
  }
)

const appNavigator = createStackNavigator(
  {
    Main: {
      screen: bottomTabNavigator,
      navigationOptions: {
        header: null // 这里要将bottomTabNavigator的header设为null
      }
    },
    Other: {
      screen: Other
    }
  }
)

因为默认情况下bottomTabNavigator会有一个自己的header，而user我们又创建了一个带header的路由页面，所以我们将Main路由（bottomTabNavigato）的header设为null，如果不设置的，页面会有2个header哦，小伙伴可自行尝试。

某tab页不要header or 需要定制header

如果我只有某个tab页不要header，咋办？
还是从navigationOptions入手，navigationPptions属性可以是一个接受navigation对象，返回一个新对象的函数。

关于navigation对象，可以看官方文档

这里我们用到了该对象的state属性。

现在我们有如下导航配置：

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: '首页'
      }
    },
    Phone: {
      screen: createStackNavigator(
        {
          Phone: {
            screen: Phone,
            navigationOptions: ({ navigation }) => (
              { // phoneHeader为自定义React组件
                header: <PhoneHeader navigation={navigation}/>
              }
            )
          }
        }
      ),
      navigationOptions: {
        tabBarVisible: false,
        title: '机型'
      }
    },
    User: {
      screen: User,
      navigationOptions: {
        title: '我的'
      }
    }
  }
)

上面代码创建了包含3个tab的底部导航，其中phone的header是定制的。接下去我们要做的是配置在appNavigator中配置TabNavigator的navigation属性，根据不同的路由使用不同的header(即当处在home页或是user页时候，使用默认的header，当处在phone页面时，移除header。

为什么是移除header?

因为phone页面已经自定义了header，我们只需移除外层TabNavigator的header即可。如果不然，会有2个header（TabNavigator和phone2个header）。这个上面已经提到。另外，也可以将定制的header配置在appNavigator中TabNavigator的navigation

開発プロセス中、さまざまなビジネス ニーズに応じて、さまざまなページに異なるヘッダーが存在します。この記事では、私が遭遇したいくつかの

一般的に使用されるヘッダーに対応する react-navigation を提供します。

私が本文です 下部にあるタブは、アプリにとって非常に一般的な要件です。 react-navigation は、下部タブを作成するための対応する API も提供します: createBottomTabNavigator

タブ ページのヘッダーをカスタマイズするにはどうすればよいですか? ケースバイケースで説明します。

すべてのタブ ページにはヘッダー

が必要です。 これは非常にシンプルで、追加の構成は必要ありません。

すべてのタブ ページにヘッダーはありません

最初に考えられるのは、createBottomTabNavigator >headernavigationOptions オブジェクトを設定することです。 /code> が null です。

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator,
      navigationOptions: ({ navigation }) => {
        const titleMap = {
          Home: '首页',
          User: '我的'
        }
        // 根据路由的顺序以及路由名定义title
        const result = {
          title: titleMap[navigation.state.routes[navigation.state.index].routeName],
          headerTitleStyle: {
            fontWeight: '600',
            color: color.gray_1,
            fontSize: px2p(18)
          },
          headerBackTitle: null
        }
        // 在配置TabNavigator时，phone页面是第一个定义的(zero-indexed)。
        // 所以当index为1的时，header设为null
        // 或者将header设为自定义header，对应修改TabNavigator中phone。
        if (navigation.state.index === 1) { 
          result.header = null
          result.headerTransparent = true
        }
        return result
      }
    },
    ...pages // 其他页面
  },
  {
    initialRouteName: 'Main'
  }
)

🎜しかし実際には、createBottomTabNavigator の navigationOptions オブジェクトは header パラメータを受け入れません。少なくともドキュメントには記述されていません。公式ドキュメント🎜🎜解決策: ルートレベルのナビゲーションで設定します。 🎜rrreee

特定のタブのみヘッダーが必要です

🎜実際、ナビゲータは相互にネストできます。 上の例と同様に、メイン ルート ページは、createBottomTabNavigator によって作成された下部ナビゲーションです。同様に、下部ナビゲーションの特定のタブのページもナビゲーション ページにすることができます。少し複雑ですので、コードを見てみましょう🎜rrreee🎜 なぜなら、bottomTabNavigator にはデフォルトで独自のヘッダーがあり、ユーザーはヘッダーのあるルーティング ページを作成しているため、Main ルート (bottomTabNavigato) Set header を null に設定しない場合、ページには 2 つのヘッダーが表示されます。自分で試してみてください。 🎜

特定のタブ ページにはヘッダーが必要ないか、ヘッダーをカスタマイズする必要があります

🎜 ヘッダーが必要ない特定のタブ ページのみがある場合はどうすればよいですか? 🎜 navigationOptions から始めます。navigationPptions 属性は、navigation オブジェクトを受け入れ、新しいオブジェクトを返す関数にすることができます。 🎜🎜navigation オブジェクトについては、公式ドキュメントをご覧ください🎜🎜ここでは、オブジェクトの state 属性を使用します。 🎜🎜これで、次のナビゲーション構成ができました: 🎜rrreee🎜 上記のコードは、phone のヘッダーがカスタマイズされている 3 つのタブを含む下部ナビゲーションを作成します。次に行う必要があるのは、appNavigator の TabNavigator の navigation 属性を設定し、異なるルートに応じて異なるヘッダーを使用することです (つまり、ホームページまたはユーザー ページにいるときは、デフォルトのヘッダーを使用します。 電話ページにいるときは、ヘッダーを削除します 🎜🎜なぜヘッダーを削除するのですか?🎜🎜電話ページがカスタマイズされているためです。ヘッダーの場合は、外側の TabNavigator のヘッダーを削除するだけで済みます。それ以外の場合は、2 つのヘッダー (TabNavigator ヘッダーと Phone2 ヘッダー) が存在します。また、appNavigator でカスタマイズされたヘッダーを構成することもできます。 TabNavigator の navigation 属性内 (未検証のため、自分で試すことができます。) 🎜rrreee🎜関連する推奨事項: 🎜🎜🎜React イベント システムの分析🎜 🎜🎜🎜🎜 Reactでアニメーションが効かない原因を分析🎜🎜🎜

以上が開発における React-Navigation の使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。