为什么我切换到React Native来创建超级简单的底页

Z时代
2024-01-10
分类：综合

react

I recently switched jobs, and one of my first tasks was to create a bottom sheet in React Native.

我最近更换了工作，而我的首要任务之一是在React Native中创建一个底页。

Coming from a native Android development background, I thought it was going to be as daunting as creating a bottom sheet in native. But I was so wrong! I was so mesmerized that I decided to write a simple tutorial on creating a bottom sheet in React Native.

来自本地Android开发背景，我认为这将与在本地创建底页一样令人生畏。但是我错了！我非常着迷，因此决定编写一个简单的教程，以在React Native中创建底页。

A bottom sheet is a useful component that slides up from the bottom of the screen and often contains different options. It's very common in modern design and used by apps such as Uber, Zomato, and many more.

底页是一个有用的组件，它可以从屏幕底部向上滑动，并且通常包含不同的选项。它在现代设计中非常常见，并被Uber，Zomato等应用程序使用。

Here's what the final result will look like:

最终结果如下所示：

Source: https://ayusch.com/

资料来源：https://ayusch.com/

So let’s take a look at how to create a bottom sheet in React Native.

因此，让我们看一下如何在React Native中创建一个底页。

入门 (Getting Started)

First, create a new project in React Native. I’m using expo-cli for this. If you're unaware of expo-cli or just getting started with React Native, check out this link.

首先，在React Native中创建一个新项目。我为此使用expo-cli。如果您不知道expo-cli或只是开始使用React Native，请查看此链接。

I’ve named my project BottomSheetDemo.

我已将我的项目命名为BottomSheetDemo。

Next up, we’ll need to install react-native-modalbox. This provides us with many inbuilt capabilities such as animations, positions, backdrops etc.

接下来，我们需要安装react-native-modalbox。这为我们提供了许多内置功能，例如动画，位置，背景等。

$ expo install [email protected]

Note: Remember to install version 1.7.1. The latest version has a bug where backdropPressToClose doesn’t work.

注意：请记住要安装1.7.1版。最新版本存在一个错误，导致backgroundPressToClose无法正常工作。

创建模态 (Creating the Modal)

It’s time to create our modal. Remove the code that you’re provided with in the beginning and add the following to your App.js file:

是时候创建我们的模态了。删除开头提供的代码，并将以下内容添加到App.js文件中：

This is the bare bones of our bottom sheet/modal. We’ll just show at text at the center of the modal.

这是我们的底页/模态的裸露的骨头。我们只显示模态中心的文本。

增加互动 (Adding Interaction)

We need the bottom sheet to show up when a button is pressed. Let’s add some interaction.

当按下按钮时，我们需要显示底页。让我们添加一些交互。

I’ll be adding a simple button in the middle of the screen:

我将在屏幕中间添加一个简单的按钮：

On clicking this button, we need to show/hide our bottom sheet. To do this, we’ll maintain a state using the useState React hook.

单击此按钮后，我们需要显示/隐藏底部的表格。为此，我们将使用useState React钩子来维护状态。

Our modal has a prop named “isOpen” that we can toggle to show/hide our bottom sheet. To show it we’ll simply set modalVisible to false and vice-versa.

我们的模态有一个名为“ isOpen”的道具，我们可以切换它以显示/隐藏我们的底部表单。为了说明这一点，我们将简单地将modalVisible设置为false，反之亦然。

But first, let’s separate out our modal from the rest of the code as it is starting to get a bit messy. I’ll create a separate function which will return my modal.

但是首先，让我们从其他代码中分离出模态，因为它开始变得有些混乱。我将创建一个单独的函数，该函数将返回模态。

The code looks much cleaner now. But our bottom sheet still doesn’t look exactly like a bottom sheet. We need to add some styling.

该代码现在看起来更加简洁。但是我们的底页看起来仍然不完全像底页。我们需要添加一些样式。

让我们添加一些样式！ (Let’s add some Styling!)

Create a stylesheet and add the following styles to it:

创建一个样式表并向其中添加以下样式：

Here’s what the final code looks like:

最终代码如下所示：

We’ve finally created our bottom sheet in React Native. It is so simple and much easier to create than in native Android.

我们终于在React Native中创建了我们的底页。与本机Android相比，它是如此简单且易于创建。

I can’t comment on iOS since I’ve never tried that.

由于从未尝试过，因此我无法在iOS上发表评论。

So, if you’re an iOS developer or have experience creating a bottom sheet in iOS, let me know what your experience was.

因此，如果您是iOS开发人员或有在iOS中创建底页的经验，请告诉我您的经验。

Join the AndroidVille SLACK workspace for mobile developers where people share their learnings about the latest in tech, especially Android Development, RxJava, Kotlin, Flutter, and mobile development in general.

加入面向移动开发人员的AndroidVille SLACK工作区，人们可以在其中分享他们对最新技术的了解，特别是Android开发，RxJava，Kotlin，Flutter和一般的移动开发。

Click on this link to join the workspace. It’s absolutely free.

单击此链接以加入工作空间。它是完全免费的。

Like what you read? Don’t forget to share this post on Facebook, Whatsapp, and LinkedIn.

喜欢你读的书吗？不要忘记在Facebook ，Whatsapp和LinkedIn上分享此帖子。

You can follow me on LinkedIn, Quora, Twitter, and Instagram where I answer questions related to Mobile Development, especially Android and Flutter.

您可以在LinkedIn ， Quora ， Twitter和Instagram上关注我，在这里我回答与移动开发(尤其是Android和Flutter)有关的问题。