Let us try to build an iOS-like Custom Search Component in React Native.

让我们尝试在React Native中构建一个类似于iOS的自定义搜索组件。

You can also find an updated npm package here for the same with the Dark mode feature.

您还可以在此处找到更新的npm软件包，以使用暗模式功能。

设置React Native项目。 (Setting up React Native Project.)

(Skip to next section, if already done..)

( 如果已经完成，请跳到下一部分。 )

Go ahead to this link https://reactnative.dev/docs/environment-setup#docsNav and follow the steps on creating a new react native project.

转到此链接https://reactnative.dev/docs/environment-setup#docsNav，并按照创建新的react native项目的步骤进行操作。

npx react-native init RNSearch

To start the application run npx react-native run-ios inside your React Native project folder. Open your project in VS Code and head to the file named App.js.And remove the code under the return statement and replace it with:

要启动应用程序，请在React Native项目文件夹中运行npx react-native run-ios 。 在VS Code中打开您的项目并转到名为App.js的文件，然后在return语句下删除该代码并将其替换为：

return {
 <>
  <View>
  </View>
 <>
}

You have successfully finished creating a project.

您已成功完成创建项目。

Let us start coding.

让我们开始编码。

The heart of this blog is the Search Component. Let me plug that code in here.

该博客的核心是搜索组件 。 让我在此处插入该代码。

You guys would be wondering what is the exact use of :

你们想知道的确切用途是什么：

1. memoizedTextInputOnFocusWidth

   memoizedTextInputOnFocusWidth

2. memoizedTextInputOnBlurWidth

   memoizedTextInputOnBlurWidth

These two variables determine the width of the <TextInput> on focus and on blur.

这两个变量确定<TextInput>在焦点和模糊时的宽度。

So we get this cool animation:

所以我们得到了这个很酷的动画：

These variables consume useWindowDimensions().width hook value so that when screen is rotated we can adjust our values so that our component fits the screen.

这些变量使用useWindowDimensions().width挂钩值，以便在旋转屏幕时可以调整值，以使我们的组件适合屏幕。

But for now, this component would work great in Portrait mode!

但是目前，此组件在纵向模式下可以很好地工作！

动画细目： (Animation Breakdown :)

1. Changing textInputWidth

   更改textInputWidth

This is a simple spring animation from react-native-reanimated API, which takes an animated value and changes its value based on the spring config provided.

这是来自react-native-reanimated API的简单spring动画，该动画会获取动画值并根据提供的spring config更改其值。

I have used the below values as config:

我将以下值用作配置：

mass: 1,stiffness: 120,damping: 20,

But feel free to play around with different spring configurations, check it out here.

但是，可以随意使用不同的弹簧配置， 在此处查看 。

2. Changing the opacity of Cancel Text.

2.更改取消文本的不透明度。

This is a simple timing animation, where the opacity variable of the Text is changed from 0 to 1 and 1 to 0 when the TextInput is focussed and blurred respectively.

这是一个简单的定时动画，当TextInput分别被聚焦和模糊时，Text的不透明度变量从0更改为1，从1更改为1。

This is the initial version of my package. There is a lot to be improved upon and many more features that can be integrated with this cool Search Component.

这是我软件包的初始版本。 此炫酷的搜索组件可以进行很多改进，可以集成更多功能。

Let us see how it works :

让我们看看它是如何工作的：

Woah that was pretty simple !!