更改 React Native 默认 ios、android 项目文件夹

发表于 2018-09-10 分类于 React Native 阅读次数：本文字数： 1.3k 阅读时长 ≈ 5 分钟

背景

来到新公司也有一个月了，完成 iOS 端洞客项目V1.3.0-V1.4.0的升级，虽然只是一个小版本的升级，但我在熟悉项目过程当中发现项目垃圾代码实在太多了，别说我了，一般的接锅人看了也难以忍受，在痛苦了几天之后我默默拉了一个新 git 分支改起来，使用 clang format规范化了整个项目的代码，后面结合git hook在git commit前自动reformat代码，这一步可以说是非常爽了。直到今天，我之前简单看了一下，check out到我改之前和改之后的代码，少了有5000+行代码，删除了几十个类文件，但里面还是充斥着大量的垃圾或者不合理的代码。开发完1.4.0，稍微看起来闲了一两天，被个喜欢行使小权利的前端小组长安装研习 React Native，准备接入原生项目，暂时用于替换一个改动比较频繁的详情页，之前就有自己学习过，但是都忘光了，又复习一遍，趁热记录一些小 tip。

接入原生 OC 项目

这一步我会专门写一篇 blog 来记录，因为还是有踩几个坑的。

更改 iOS 和 Android 项目名

本来原生开发的好好的，顶层文件夹用的是项目名，要接入 RN，用的方案也是 RN 顶层文件夹包含安卓和 iOS 项目，但 RN 默认只认 ios 和 android 两个文件夹作为项目路径，google 了一番找了找官方文档没看到有关于这里的自定义，看看 cli 里有没有相关 help，看了下，确实有，如下：

查看`react-native cli`帮助

☁  mobile-dongke-RN [RN-integration] ⚡ react-native run-ios --help

  react-native run-ios [options]
  builds your app and starts it on iOS simulator

  Options:

    --simulator [string]      Explicitly set simulator to use (default: iPhone 6)
    --configuration [string]  Explicitly set the scheme configuration to use
    --scheme [string]         Explicitly set Xcode scheme to use
    --project-path [string]   Path relative to project root where the Xcode project (.xcodeproj) lives. The default is 'ios'. (default: ios)
    --device [string]         Explicitly set device to use by name.  The value is not required if you have a single device connected.
    --udid [string]           Explicitly set device to use by udid
    --no-packager             Do not launch packager while building
    --verbose                 Do not use xcpretty even if installed
    --port [number]            (default: 8081)
    --config [string]         Path to the CLI configuration file
    -h, --help                output usage information

看到可以通过设置--project-path参数来设置关联 XCode 项目的根文件夹，可以看到这里还可以指定模拟器类型，默认使用的是iPhone 6，挺不喜欢的，这里也改了，我们可以通过运行如下命令查看本机有哪些模拟器可以使用：

查看本机可用模拟器

☁  ~  xcrun simctl list devices
== Devices ==
-- iOS 8.1 --
    iPhone 4s (E62E0A29-BCEE-4BB1-B27C-1D5CC225C6B0) (Shutdown)
    iPhone 5 (2D4FE14B-E33D-491C-B919-3352FA32B03A) (Shutdown)
    iPhone 5s (A90FF130-CDE8-4D60-AEFE-9DAA4ACA8F9A) (Shutdown)
    iPhone 6 (518A2EFE-1AD8-47AD-B5AC-F2424D55444D) (Shutdown)
    iPhone 6 Plus (4BFB145F-1D34-4BE9-9A1B-2EBED4F11DEC) (Shutdown)
    iPad 2 (83D02E68-7184-4ABF-B6D6-33A9CA056BF0) (Shutdown)
    iPad Retina (5D2B27ED-87F1-4ADD-8333-31FE4B239EDA) (Shutdown)
    iPad Air (07AC87B1-9C9B-4645-975E-861CFFB323A3) (Shutdown)
-- iOS 10.0 --
    iPhone 5 (43372734-B0C6-4C7B-85C0-DFC41F9B9883) (Shutdown)
    iPhone 5s (5D88D6F2-4683-4DC2-8FBA-7F762683E22C) (Shutdown)
    iPhone 6 (CFFB2105-C2A6-4EEC-91F2-2F805F0F94DF) (Shutdown)
    iPhone 6 Plus (C4B1BC99-AF7B-4F11-8752-DA5C18676428) (Shutdown)
    iPhone 6s (2D4D0793-6794-4AAF-BC82-BC7313D749D1) (Shutdown)
    iPhone 6s Plus (BBA3565D-3705-419F-9ABE-994C218B27B0) (Shutdown)
    iPhone SE (4DB18D89-DA99-4D66-9B18-7ED30A0D9491) (Shutdown)
    iPad Air (50E6ADA1-B589-43D1-A3A9-B653EC43D298) (Shutdown)
    iPad Air 2 (15331EA9-7F84-4D63-B36E-FE15C5F89E96) (Shutdown)
    iPad Pro (9.7 inch) (6A23335C-9A5A-4B84-B671-1F60E5A0E1D0) (Shutdown)
    iPad Pro (12.9 inch) (451FBDD2-AD2D-4E53-8025-DEA420376618) (Shutdown)
-- iOS 12.0 --
    iPhone 5s (89879C1B-D07C-4D4E-BC62-6525A9BB4B7B) (Shutdown)
    iPhone 6 (D437284B-3464-4F81-9AA7-A19690B80892) (Shutdown)

编写简单的 Shell，省去每次敲烦恼

这样我们选自己想使用的模拟器、自定义项目路径这两件都 OK 了，最后我们可以编写一个 Shell 脚本，就不用每次都要手敲了，在 RN 项目根路径下运行：

☁  mobile-dongke-RN [RN-integration] ⚡ touch run-ios-iPhone_8.sh
☁  mobile-dongke-RN [RN-integration] ⚡ echo -e "#\!/bin/bash\n\nreact-native run-ios --project-path "./puma" --simulator "iPhone 8"" >> run-ios-iPhone_8.sh
☁  mobile-dongke-RN [RN-integration] ⚡ chmod +x run-ios-iPhone_8.sh

使用`Shell`脚本启动`iOS`项目

下次运行直接运行run-ios-iPhone_8.sh就好了，当然你也可以直接从 XCode 启动项目。

☁  mobile-dongke-RN [RN-integration] ⚡ ./run-ios-iPhone_8.sh

安卓端项目路径自定义

同理我们可以运行react-native run-android --help查看帮助，可以看到可以通过指定--root参数来设置，读者可以根据帮助自行设置。

☁  mobile-dongke-RN [RN-integration] ⚡ react-native run-android --help

  react-native run-android [options]
  builds your app and starts it on a connected Android emulator or device

  Options:

    --install-debug
    --root [string]           Override the root directory for the android build (which contains the android directory) (default: )
    --flavor [string]         --flavor has been deprecated. Use --variant instead
    --variant [string]
    --appFolder [string]      Specify a different application folder name for the android source. (default: app)
    --appId [string]          Specify an applicationId to launch after build. (default: )
    --appIdSuffix [string]    Specify an applicationIdSuffix to launch after build. (default: )
    --main-activity [string]  Name of the activity to start (default: MainActivity)
    --deviceId [string]       builds your app and starts it on a specific device/simulator with the given device id (listed by running "adb devices" on the command line).
    --no-packager             Do not launch packager while building
    --port [number]            (default: 8081)
    --terminal [string]       Launches the Metro Bundler in a new window using the specified terminal path. (default: )
    --config [string]         Path to the CLI configuration file
    -h, --help                output usage information

背景