如何使用React Native構建嵌套的抽屜菜單

by Dhruvdutt Jadhav

由Dhruvdutt Jadhav

Screen space is a precious commodity on mobile. The drawer menu (or “hamburger menu”) is one of the most popular navigation patterns that helps you save it while offering intuitive navigation. In this post, I will demystify how to build a nested (multi-level) drawer menu using React Native and React Navigation. ?

屏幕空間是移動設備上的寶貴商品。 抽屜菜單 (或“漢堡菜單”)是最受歡迎的導航模式之一，可在提供直觀導航的同時幫助您保存它。在這篇文章中，我將揭開如何使用React Native和React Navigation構建嵌套(多級)抽屜菜單的神秘感。？

Try the live demo on mobile?or on web. ??

在移動設備或WEB上嘗試現場演示。？ ?

Navigation forms the backbone of a huge majority of apps built for production. The look and feel of navigation are important for driving use and engagement in mobile apps.

導航是為生產而構建的絕大多數應用程序的骨干。 導航的外觀對于推動移動應用的使用和參與度至關重要。

However, if you are React Native developer, there isn’t a clear opinion when it comes to building a navigation menu. React Native recommends a bunch of libraries for navigation. Each has its strength, depending on your needs, but there’s no one clear winner for all use-cases.

但是，如果您是React Native開發人員，則在構建導航菜單時并沒有明確的意見。 React Native 建議使用一堆庫進行導航。 每一種都有其優勢，取決于您的需求，但是對于所有用例而言，沒有一個明顯的贏家。

None of the navigation libraries currently support nested drawers out-of-the-box. But one of the libraries that provides a rich API to build custom solutions is React Navigation — a JavaScript-based navigation. It is strongly backed and maintained by the React Native community. This is what we’re going to use in this tutorial.

當前，沒有任何導航庫支持開箱即用的嵌套抽屜。 但是提供豐富的API來構建自定義解決方案的庫之一是React Navigation (基于JavaScript的導航)。 它由React Native社區大力支持和維護。 這就是本教程要使用的內容。

用例？ (The use case ??)

I had to build a playground app to showcase a UI components library for React Native. It consists of eight different components, each supporting various props, and more than 50 different options.

我必須構建一個運動場應用程序來展示React Native的UI組件庫。 它由八個不同的組件組成，每個組件都支持各種道具以及50多種不同的選項。

It was not possible to show all options inside the drawer at one time without a multi-level drawer which would scope the options based on the selected component. I couldn’t find a ready-made solution for this, so I needed to build a custom one.

如果沒有一個多級抽屜將無法根據所選組件確定選項的范圍，則無法一次在抽屜中顯示所有選項。 我無法為此找到現成的解決方案，因此我需要構建一個定制的解決方案。

基本設置？ (Base setup ?)

For the base setup, I’m assuming you already have a React Native project setup with either CRNA, Expo Kit, or React Native CLI. Make sure you have the react-navigation library installed with either yarn or npm. We’ll start right off with using the navigation API.

對于基本設置，我假設您已經具有使用CRNA ， Expo Kit或React Native CLI的React Native項目設置。 確保您已安裝帶有yarn或npm的react-navigation庫。 我們將從使用導航API開始。

Feel free to check the getting-started guide before proceeding if you aren’t familiar with the React Navigation API.
如果您不熟悉React Navigation API，請在繼續之前先閱讀入門指南。

We’ll start with an example similar to the one documented in the React Navigation’s DrawerNavigator official guide. We’ll create a simple drawer that has two drawer items: Home and Notifications.

我們將從一個類似于React Navigation的DrawerNavigator 官方指南中記錄的示例開始。 我們將創建一個具有兩個抽屜項目的簡單抽屜：“主頁”和“通知”。

自定義抽屜內容 (Custom drawer content)

React Navigation enables all navigators to do a lot of customizations by passing a navigator config as the second parameter. We’ll use it to render some custom content other than the stock drawer items.

通過將導航器配置作為第二個參數傳遞，React Navigation使所有導航器都可以進行很多自定義。 我們將使用它來呈現一些自定義內容，而不是庫存項目。

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

DrawerNavigator (RouteConfigs, DrawerNavigatorConfig)

We’ll pass a prop called contentComponent to the config which would allow us to render custom content for the drawer. We’ll use that to show a header and footer along with the prevailing DrawerItems from react-navigation.

我們將一個名為contentComponent的道具contentComponent給配置，該道具將允許我們為抽屜渲染自定義內容。 我們將用它來顯示頁眉和頁腳以及來自react-navigation的流行DrawerItems 。

This potentially unlocks a lot of things that can be done by controlling what to render inside the drawer.

通過控制在抽屜內渲染的內容，這有可能解鎖很多事情。

創建屏幕映射 (Creating screen mapping)

We need to build a nested drawer for each component that we want to showcase. So let’s first register all the screens with the DrawerNavigator’s Config. We’ve created a separate screen mapping file for components. You can very well have your own convention, or define the object directly similar to the Home screen component.

我們需要為要展示的每個組件構建一個嵌套的抽屜。 因此，讓我們首先使用DrawerNavigator的Config注冊所有屏幕。 我們為組件創建了一個單獨的屏幕映射文件。 您可以很好地擁有自己的約定，或者直接類似于主屏幕組件定義對象。

The screen mapping consists of simple objects with screen property. The screenMapping object looks something like this:

屏幕映射由具有屏幕屬性的簡單對象組成。 screenMapping對象看起來像這樣：

After registering all components, the drawer would look something like this:

注冊所有組件后，抽屜將如下所示：

This would render all the components along with their options. We have two main components: DataSearch and TextField. Each has options like “With Icon Position,” “With Placeholder,” and more. Our task is to segregate these into a list of only components (DataSearch, TextField).

這將呈現所有組件及其選項。 我們有兩個主要組件： DataSearch和TextField 。 每個選項都有“帶有圖標位置”，“帶有占位符”等選項。 我們的任務是將它們分成僅包含組件(DataSearch，TextField)的列表。

分組外抽屜 (Grouping outer drawer)

A pattern I followed in the mapping was to use a delimiter _ to group together options from one component. For instance, the navigation keys I used were “DataSearch_Basic” and “DataSearch_With Icon Position”. This is exactly what is going to help us combine the options for a single component like DataSearch. We’ll evaluate uniquely all the components we need to show for the outer drawer.

我在映射中遵循的模式是使用定界符_將來自一個組件的選項組合在一起。 例如，我使用的導航鍵是“ DataSearch_Basic”和“ DataSearch_With Icon Position”。 這正是將幫助我們組合單個組件(如DataSearch)的選項的原因。 我們將唯一評估外部抽屜所需顯示的所有組件。

We’ll create a util function to evaluate outer drawer list items to render.

我們將創建一個util函數來評估要渲染的外部抽屜列表項。

This function will return an object with unique components for the main components like (DataSearch, TextField) that we’ll render on the screen with the help of the contentComponent custom component. We’ll also maintain a boolean to determine the content rendered on the drawer at a particular instant.

此函數將返回一個具有唯一組件的對象，這些組件具有主要組件(例如DataSearch，TextField)，這些組件將contentComponent自定義組件在屏幕上呈現。 我們還將維護一個布爾值，以確定在特定時刻渲染在抽屜上的內容。

The renderMainDrawerComponent is just a function iterating over the keys of the components object. It renders custom outer drawer items built on top of simply Text and View from react-native. Check the full code here.

renderMainDrawerComponent只是一個在components對象的鍵上進行迭代的函數。 它呈現了基于react-native的簡單Text和View之上的自定義外部抽屜項目。 在此處檢查完整代碼。

This will render the drawer like this:

這將使抽屜如下所示：

渲染兒童抽屜？ (Rendering the child drawer ?)

Now, we need to show the options based on the component that is tapped. You might have noticed that in utils, we’re also extracting the start and end indexes of the component groups based on the delimiter pattern.

現在，我們需要根據所點擊的組件顯示選項。 您可能已經注意到，在utils中，我們還基于定界符模式提取了組件組的開始索引和結束索引。

For instance, DataSearch screens start at index 1 (index 0 is Home screen) and ends at 3. TextField starts at 3 and end at 5. We’ll use these indices to magically slice the items that are passed to DrawerItems based on the selected component and its indices.

例如，DataSearch屏幕從索引1開始(索引0是主屏幕)，結束于3。TextField從3開始，結束于5。我們將使用這些索引根據所選內容神奇地切片傳遞給DrawerItems的items組件及其索引。

Now, after tapping on DataSearch, the drawer will yield into something like this:

現在，在點擊DataSearch之后，抽屜將產生如下所示的內容：

We’ve also added a sweet back button which basically toggles a boolean to render the main drawer items. You can check the full code here.

我們還添加了一個漂亮的后退按鈕，該按鈕基本上切換了一個布爾值以呈現主抽屜項目。 您可以在此處查看完整的代碼。

Now, the only thing left to do is make the drawer items look cleaner by trimming the redundant component name. Again, the rich React Navigation API comes handy here.

現在，唯一要做的就是通過修剪冗余組件名稱來使抽屜項目看起來更整潔。 同樣，豐富的React Navigation API在這里很方便。

There are various properties we can pass with navigationOptions. A particular one we’re going to use here is the title prop with the screen mapping. This will let us remove the part before the first delimiter. So, “DataSearch_Basic” will show as “Basic” only.

我們可以通過navigationOptions傳遞各種屬性。 我們將在此處使用的一個特殊title是帶有屏幕映射的title道具。 這將使我們刪除第一個定界符之前的部分。 因此，“ DataSearch_Basic”將僅顯示為“ Basic”。

That’s all. We can add as many items we want based on the delimiter pattern. The playground app we’ve built consists of eight main components and over 53 total options.

就這樣。 我們可以基于定界符模式添加任意數量的項。 我們構建的游樂場應用程序由八個主要組件組成，共有53個選項。

Here’s the link to the final app and the codebase.
這是最終應用程序和代碼庫的鏈接。

總結？ (Summary ?)

Base setup: DrawerNavigation hello world from docs.
基本設置 ：從DrawerNavigation的hello world 文檔。
Custom drawer content: Render drawer items with contentComponent.
自定義抽屜內容 ：使用contentComponent渲染抽屜項目。
Screen mapping: Define and register all drawers components.
屏幕映射 ：定義并注冊所有抽屜組件。
Group outer drawer: Read delimiter pattern to group drawer items.
分組外部抽屜 ：讀取定界符樣式以分組抽屜項目。
Rendering child drawer: Slice and render child drawer items.
渲染兒童抽屜 ：切片并渲染兒童抽屜項目。

結論 (Conclusion ?)

We learned to build a multi-level drawer menu with React Native. We used React Navigation API to render a custom content component inside the drawer, and used the delimiter pattern for screen mapping. Use this pattern to build any level of nesting or conditional rendering for drawers.

我們學會了使用React Native構建多級抽屜菜單。 我們使用React Navigation API在抽屜內部渲染自定義內容組件，并使用定界符模式進行屏幕映射。 使用此模式可以為抽屜構建任何級別的嵌套或條件渲染。

ReactiveSearch？ (ReactiveSearch ?)

Provides UI components for Native and Web platform to build perfect search experiences. You can check all the components it offers by playing with the playground app itself or by creating your own component.

提供用于本機和Web平臺的UI組件，以構建完美的搜索體驗。 您可以通過使用Playground應用本身或創建自己的組件來檢查其提供的所有組件。

appbaseio/reactivesearchreactivesearch - A React and React Native UI components library for building data-driven appsgithub.com

appbaseio / reactivesearch reactsearch- 一個React和React Native UI組件庫，用于構建數據驅動的應用程序 github.com