この記事で共有する内容は、開発における 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呢? 我们分情况讨论:
很简单,无需额外的配置。
第一时间可能会想到的是在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 } )
其实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,咋办?
还是从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
パラメータを受け入れません。少なくともドキュメントには記述されていません。公式ドキュメント🎜🎜解決策: ルートレベルのナビゲーションで設定します。 🎜rrreeecreateBottomTabNavigator
によって作成された下部ナビゲーションです。同様に、下部ナビゲーションの特定のタブのページもナビゲーション ページにすることができます。少し複雑ですので、コードを見てみましょう🎜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 サイトの他の関連記事を参照してください。