こんばんは,ぽちです.
Expoを使って開発をしていたら,途中でどうしてもNative Modulesを使いたいというケースが出てきます.
その場合はdetach
する必要が出てきます.
detachした後はXCodeやAndroid Stuidoで自分で管理する必要が出てきますので,その辺りよく考えてからdetachの道へ進むことをオススメします.うちは極力detachの道へ進みたくありません.
detachした後でもXDEで起動とかXDEからPublishとかは出来ます. Publishは出来ると言っても,Nativeの部分はケアされないのでその部分は動きません.(クラッシュするでしょうね)
それでは,detachの流れを追いましょう. 基本的には Detaching to ExpoKit に沿ってコマンドを実行して行けばdetach出来ます.
初めに,exp
コマンドが必要なので,入れていない場合はインストールします.
$ npm install -g exp
Expoへのログインが必要なので,ログインします.
$ exp login
exp.json
に必要な項目を追加します.
{ "name": "Your App Name", "icon": "./path/to/your/app-icon.png", "version": "1.0.0", "slug": "your-app-slug", "sdkVersion": "17.0.0", "ios": { "bundleIdentifier": "com.yourcompany.yourappname のようなのを入れる", }, "android": { "package": "com.yourcompany.yourappname のようなのを入れる", } }
その後exp detach
を実行すると色々処理が行われてios
ディレクトリやandroid
ディレクトリが作成されたりします.
$ exp detach [exp] Making sure project is set up correctly... [exp] Your project looks good! Validating project manifest... Downloading iOS code... Moving iOS project files... Naming iOS project... Configuring iOS project... Using shell config: { manifestUrl: 'exp://exp.host/@pchw/***********', isShell: true, isManifestVerificationBypassed: true } Configuring iOS dependencies... Cleaning up iOS... iOS detach is complete! Downloading Android code... Moving Android project files... Configuring Android project... Naming Android project... Cleaning up Android... Android detach is complete! Writing ExpoKit configuration... Finished detaching your project! Look in the `android` and `ios` directories for the respective native projects. Follow the ExpoKit guide at https://docs.expo.io/versions/latest/guides/expokit.html to get your project running.
XDEでRestartします.
その後,ios
ディレクトリに移動して,pod install
を行って依存するモジュールのインストールを行います.これは結構時間がかかります.
$ cd ios $ pod install Analyzing dependencies Pre-downloading: `ExpoKit` from `http://github.com/expo/expo.git`, tag `ios/1.16.2` Fetching podspec for `React` from `../node_modules/react-native` Fetching podspec for `Yoga` from `../node_modules/react-native/ReactCommon/yoga` Downloading dependencies Installing Amplitude-iOS (3.14.1) Installing Analytics (3.6.1) Installing AppAuth (0.9.1) Installing Bolts (1.8.4) Installing Branch (0.14.12) Installing CocoaLumberjack (3.2.0) Installing Crashlytics (3.8.4) Installing ExpoKit (1.16.2) Installing FBAudienceNetwork (4.23.0) Installing FBSDKCoreKit (4.23.0) Installing FBSDKLoginKit (4.23.0) Installing FBSDKShareKit (4.23.0) Installing Fabric (1.6.11) Installing FirebaseAnalytics (3.9.0) Installing FirebaseCore (3.6.0) Installing FirebaseInstanceID (1.0.10) Installing GPUImage (0.1.7) Installing GTMOAuth2 (1.1.4) Installing GTMSessionFetcher (1.1.10) Installing Google (3.0.3) Installing GoogleMaps (2.2.0) Installing GoogleSignIn (4.0.2) Installing GoogleToolboxForMac (2.1.1) Installing React (0.44.0) Installing Yoga (0.44.0.React) Installing lottie-ios (1.5.1) Generating Pods project Integrating client project Sending stats Pod installation complete! There are 15 dependencies from the Podfile and 26 total pods installed.
補足:pod install時にエラーが起こった場合
手元の環境ではpod install
時に以下のようなエラーが出ました.
$ pod install Analyzing dependencies Pre-downloading: `ExpoKit` from `http://github.com/expo/expo.git`, tag `ios/1.16.2` Fetching podspec for `React` from `../node_modules/react-native` Fetching podspec for `Yoga` from `../node_modules/react-native/ReactCommon/yoga` [!] Unable to find a specification for `lottie-ios (~> 1.5.1)` depended upon by `ExpoKit/Core`
その場合はpod setup
を実行し,その後再度pod install
をすることで成功するようになりました.
$ pod setup Setting up CocoaPods master repo $ /usr/local/bin/git -C /Users/pochi/.cocoapods/repos/master fetch origin --progress remote: Counting objects: 287020, done. remote: Compressing objects: 100% (83/83), done. remote: Total 287020 (delta 52618), reused 52644 (delta 52603), pack-reused 234331 Receiving objects: 100% (287020/287020), 29.79 MiB | 432.00 KiB/s, done. Resolving deltas: 100% (193366/193366), completed with 7824 local objects. From https://github.com/CocoaPods/Specs d03518a..3c729d8 master -> origin/master $ /usr/local/bin/git -C /Users/pochi/.cocoapods/repos/master rev-parse --abbrev-ref HEAD master $ /usr/local/bin/git -C /Users/pochi/.cocoapods/repos/master reset --hard origin/master Checking out files: 100% (29533/29533), done. HEAD is now at 3c729d8 [Add] iLog 1.2.5 Setup completed
ここまで出来れば,あとはビルドして実行するだけです.
.xcworkspace
のファイルをXCodeで開いてビルド→実行でも良いですし,以下のようにreact-native run-ios
を使うのでもいいです.
XCodeを開きたくないので,react-native run-ios
します.
$ cd .. $ react-native run-ios Scanning 550 folders for symlinks in /Users/pochi/Documents/development/github/expokit/node_modules (11ms) Found Xcode workspace expokit.xcworkspace (長いので省略) ** BUILD SUCCEEDED ** Installing build/Build/Products/Debug-iphonesimulator/expokit.app Launching com.yourcompany.yourappname com.yourcompany.yourappname: 82444
自動的にSimulatorが起動して実行されます.
この状態で,XDEの方からbundleされたjsが配信されている状態になります. もちろん,jsのコードを編集するとすぐにSimulatorに反映されます.
あとは,使いたいNative Modulesをインストールして,react-native link
やrnpm link
して使うことができます.
おめでとうございます,detach成功です.