React Native项目调整android&ios目录层级-逐梦个人博客

最近有一个新项目需要用到React Native，不得不去学习一下相关的知识，在使用脚手架生成项目的过程中，发现默认情况下原生项目目录android和ios是放在根目录的，这个让我觉得有点怪怪的，准备去调整一下目录的结构，也自此入了坑。

在使用脚手架工具初始化RN项目后，默认的目录结构大致是这样的：

...
 - android
 - ios
...

而我所期待的目录结构是这样的：

...
 - clients
    - android
    - ios
 - src
 ...

看似一个很简单的结构调整，但是真正去做的时候就会发现其中的苦楚，我花了差不多整整一天的时间去查资料调试源码，百度、Google、ChatGPT都问了个遍，换了N种姿势，解决了一个又一个的报错，最终完成了调整，本文将调整的步骤做一个记录，希望能帮到大家。

一、调整目录结构

首先我们在根目录创建clients目录，并将android、ios目录移进去，然后在根目录创建react-native.config.js，内容如下：

module.exports = {
  project: {
    android: {
      sourceDir: './clients/android',
    },
    ios: {
      sourceDir: './clients/ios',
    },
  },
};

我们将android和ios项目的sourceDir分别指向了clients下对应的目录，由于我们改变了目录的层级，这个时候项目已经起不来了，项目依赖的路径已经改变了，接下来我们分别从android和ios两个方面去更改配置修正依赖路径。

二、android依赖修正

1、更改settings.gradle

该文件位于/clients/android目录下，我们将：

apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')

更改为：

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../../node_modules/react-native-gradle-plugin')

由于我们增加了clients这个层级，android目录层级加深了一级，所以需要使用../多回退一级目录。

2、更改build.gradle

注意android目录下存在2个build.gradle文件，而我们要改的文件位于/clients/android/app目录下，首先我们在配置区块react中增加以下配置：

root = file("../../../")
reactNativeDir = file("../../../node_modules/react-native")
codegenDir = file("../../../node_modules/react-native-codegen")
cliFile = file("../../../node_modules/react-native/cli.js")

默认的注释里面也存在这些配置，但是我们需要按照上述代码调整。

在上面的配置更新完成后，将文件拉到最底部，将

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

更改为：

apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

这里同样的我们也是多回退了一级目录。

三、ios依赖修正

1、更改Podfile

该文件位于/clients/ios目录下，将文件最顶部的代码：

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

更改为：

require_relative '../../node_modules/react-native/scripts/react_native_pods'
require_relative '../../node_modules/@react-native-community/cli-platform-ios/native_modules'

然后搜索react_native_post_install，将

react_native_post_install(
   installer,
   # Set `mac_catalyst_enabled` to `true` in order to apply patches
   # necessary for Mac Catalyst builds
   :mac_catalyst_enabled => false
 )

更改为：

react_native_post_install(
   installer,
   "../../node_modules/react-native",
   # Set `mac_catalyst_enabled` to `true` in order to apply patches
   # necessary for Mac Catalyst builds
   :mac_catalyst_enabled => false
)

2、更改project.pbxproj

该文件位于/clients/ios/项目名.xcodeproj目录下，搜索文件中所有的../node_modules那个全部替换为../../node_modules, 让其多回退一级目录。

四、写在最后

至此，不出意外我们项目的结构已经调整成功了，不过上面的方式是通过我自己查资料和一些源码调试摸索出来的，不知道后期会不会有什么隐患，如果你有更好的方案或者想法，欢迎联系我一起交流沟通，通过下方二维码可以加入全栈技术交流群，期待你的加入。