前言
在开发 React Native 项目中，我们经常需使用第三方库，例如 react-native-vector-icons、react-native-firebase 等。而为了让项目结构更加清晰，我们需要对各个模块进行重命名。但手动修改文件名和相应的导入路径是一件繁琐而耗时的工作。
这时候，我们可以借助 npm 包 @jemmyphan/react-native-rename 来简化这个过程。本篇文章将详细介绍这个 npm 包的使用方法。
安装
我们在项目根目录下，使用 npm 命令安装 @jemmyphan/react-native-rename：
npm install @jemmyphan/react-native-rename --save-dev
其中，-dev 表示将此包安装为本地开发依赖。
使用
- 找到 react-native-rename 和 react-native 的绝对路径
在使用 @jemmyphan/react-native-rename 之前，我们需要找到 react-native 和 react-native-rename 的绝对路径。可以使用以下两个命令查找：
which react-native which react-native-rename
如果命令行中出现
/usr/local/bin/react-native error: react-native-rename not installed, please install it and try again...
则可惜到当前项目的 node_modules/@jemmyphan/react-native-rename/bin/react-native-rename 文件夹下，将 rename.js 文件拖到该 bin 文件夹中，并更名为 react-native-rename。
然后，将项目中 node_modules/react-native 和 node_modules/@jemmyphan/react-native-rename 的绝对路径都复制下来，备用。
- 执行命令
在执行命令之前，我们需要先备份一下项目。在项目根目录下，执行以下命令：
react-native-rename <newName>
这里的<newName>表示新名称。例如，如果我们将项目重命名为 AwesomeProject，则命令如下：
react-native-rename AwesomeProject
执行该命令后，我们将看到以下提示：
This will replace all occurrences of 'oldName' with 'newName' in your project, including 'ios/oldName' and 'android/oldName' ... Do you wish to continue? (y/n)
输入 y，并按回车键确认。
紧接着，我们需要告诉 @jemmyphan/react-native-rename 项目目录的绝对路径、react-native 目录的绝对路径以及 react-native-rename 的绝对路径。例如：
react-native-rename newYuWorkplace -b com.newYuWorkplace -f --project-path '/Users/newYu/Learning_RN/NewLearningRN' --react-native-path '/Users/newYu/Learning_RN/NewLearningRN/node_modules/react-native' --rename-react-native '/Users/newYu/Learning_RN/NewLearningRN/node_modules/@jemmyphan/react-native-rename/bin/react-native-rename'
这段命令中，-b 表示 bundle ID，-f 表示强制更新。
执行该命令后，我们将在终端中看到 @jemmyphan/react-native-rename 的输出信息，其中包含替换的内容和修改的文件。
- 修改项目配置
在执行完上述命令后，我们需要将新名称应用到项目的配置中。
在 iOS 项目中，我们需要修改项目目录中的 ios/\newName/\newName.xcodeproj/project.pbxproj 文件：
cd ios/<newName> sed -i '' 's/oldName/NewName/g' <newName>.xcodeproj/project.pbxproj
在 Android 项目中，我们需要修改两个文件：
- /android/settings.gradle 文件
- /android/app/build.gradle 文件
在 settings.gradle 中，将以下内容：
rootProject.name = 'oldName'
修改为：
rootProject.name = 'newName'
在 build.gradle 中，将以下内容：
applicationId "com.oldName"
修改为：
applicationId "com.newName"
- 工作完成
完成上述操作后，我们可以重新启动项目，调试新名称下的应用是否正常运行。如果发现有异常，可以在上述步骤中重新操作。
结语
本篇文章介绍了 React Native 项目中使用 npm 包 @jemmyphan/react-native-rename 进行重命名的详细步骤。通过了解这些步骤，我们可以更加高效地管理项目结构，使开发更具生产力。
以下是示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ---------- - ---- ---------------
------ ------- ----- --- ------- --------- -
-------- -
------ -
----- -------------------------
----- -------------------------- -------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
----- -
--------- ---
----------- -------
------ -------
--
---感谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc3967216659e24429c