React-Native環境構築奮闘記(1日目)
既存のReact-Nativeのプロジェクトを実行しようとしたら色々エラーが出たので、動くまでの奮闘記を書いていきます(予定)。
開発環境
M1チップのmacbook Airを使っています。
$ npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 13.6
CPU: (8) arm64 Apple M1
Memory: 240.70 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.0/bin/yarn
npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.13.0 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10811636
Xcode: 15.0/15A240d - /usr/bin/xcodebuild
Languages:
Java: 11.0.20.1 - /usr/bin/javac
Python: 3.11.5 - /Users/ikko/anaconda3/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.63.3 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Android編
1. Invariant Violation
androidのbuildは成功しますが、実行時に以下のようなエラーが出ます。
[Tue Oct 10 2023 20:00:17.881] ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...):
'RNCDatePicker' could not be found. Verify that a module by this name is registered in the native binary.
なんかモジュールが見つからないらしいです。その下にも色々エラー出てますけど、このエラーに関連してそうです。iPhone版のエラーを解決するためにpatchを当てていたところが怪しいので、patchを消してみます。
$ rm ./yarn.lock
$ rm -rf ./node_modules/
$ yarn run:android
変化なし。ちなみに、パッチファイルはこんな感じ。エラーを起こしてる場所のコード無くても動きそうなので、消します。
diff --git a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
index c139440..75818bd 100644
--- a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
+++ b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
@@ -56,9 +56,6 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeRef node, float width, YGM
NSTimeZone *timeZone = [NSTimeZone timeZoneWithName:shadowPickerView.timeZoneName];
if (timeZone != nil) {
[shadowPickerView.picker setTimeZone:timeZone];
- } else {
- RCTLogWarn(@"'%@' does not exist in NSTimeZone.knownTimeZoneNames. Falling back to localTimeZone=%@", shadowPickerView.timeZoneName, NSTimeZone.localTimeZone.name);
- [shadowPickerView.picker setTimeZone:NSTimeZone.localTimeZone];
}
} else {
[shadowPickerView.picker setTimeZone:NSTimeZone.localTimeZone];
expoのバージョン下げれば良いって言ってるけど、expoなんて入れてないしな〜。
これ試してみよう。キャッシュをクリア!
、、、だめでした。
無難にライブラリのバージョン下げてみるか。
$ yarn add @react-native-community/datetimepicker@6.x
buildエラー
シンボル: メソッド hasActiveReactInstance()
場所: クラス ReactApplicationContext
/Users/ikko/Desktop/Test/Cucom-App/node_modules/@react-native-community/datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNTimePickerDialogModule.java:58: エラー: シンボルを見つけられません
if (!mPromiseResolved && getReactApplicationContext().hasActiveReactInstance()) {
ちょっと調べてたけど詰んでそうなので、バージョン戻します。後回し。
iOS編
1. RNDateTimePickerエラー
** BUILD FAILED **
The following build commands failed:
CompileC /Users/ikko/Library/Developer/Xcode/DerivedData/Cucom-djblyojibqpqqvdzjlgfelikuwax/Build/
Intermediates.noindex/Pods.build/Debug-iphonesimulator/RNDateTimePicker.build/Objects-normal/x86_64/
RNDateTimePickerShadowView.o /Users/ikko/Desktop/Test/Cucom-App/node_modules/@react-native-community/
datetimepicker/ios/RNDateTimePickerShadowView.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(in target 'RNDateTimePicker' from project 'Pods')
(1 failure)
/Users/ikko/Desktop/Test/Cucom-App/node_modules/@react-native-community/ datetimepicker/ios/RNDateTimePickerShadowView.m
が悪さをしていそうなので、下のようにパッチを当てます。
diff --git a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
index c139440..75818bd 100644
--- a/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
+++ b/node_modules/@react-native-community/datetimepicker/ios/RNDateTimePickerShadowView.m
@@ -56,9 +56,6 @@ static YGSize RNDateTimePickerShadowViewMeasure(YGNodeRef node, float width, YGM
NSTimeZone *timeZone = [NSTimeZone timeZoneWithName:shadowPickerView.timeZoneName];
if (timeZone != nil) {
[shadowPickerView.picker setTimeZone:timeZone];
- } else {
- RCTLogWarn(@"'%@' does not exist in NSTimeZone.knownTimeZoneNames. Falling back to localTimeZone=%@", shadowPickerView.timeZoneName, NSTimeZone.localTimeZone.name);
- [shadowPickerView.picker setTimeZone:NSTimeZone.localTimeZone];
}
} else {
[shadowPickerView.picker setTimeZone:NSTimeZone.localTimeZone];
success Successfully launched the app on the simulator
よし!ん?
[Tue Oct 10 2023 20:52:33.202] ERROR Invariant Violation: Tried to register two
views with the same name RNDateTimePicker
なんかエラー出た。キャッシュとかの問題なのかな。
だめです。もしかしたら、パッチを当ててるせいで重複して読み込まれてるのかな。でもパッチ消したら動かないしな〜。一旦コマンドラインじゃなくてxCodeから動かしてみるか。
同じエラー、、、
ラチが開かないので、初めからやり直します。
2. react-native-safe-area-context.
なぜかこのpodファイルだけインストールされないので、インストールするようにパッチを当てます。
node_modules/react-native/scripts/react_native_pods.rb に以下を追加。
def use_react_native! (options={})
+ pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'
パッチを当てる。
$ npx patch-package react-native
$ yarn
[!] CocoaPods could not find compatible versions for pod "react-native-safe-area-context":
In Podfile:
react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
Specs satisfying the `react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)` dependency were found, but they required a higher minimum deployment target.
バージョン関係のエラー。
ios/Podfile を以下のように変更。
- platform :ios, '11.0'
+ platform :ios, '13.0'
The following build commands failed:
CompileC /Users/ikko/Library/Developer/Xcode/DerivedData/
Cucom-czprnwmoemquywazvhqmaqollnmk/Build/Intermediates.noindex/Pods.build/
Debug-iphonesimulator/RNDateTimePicker.build/Objects-normal/x86_64/
RNDateTimePickerShadowView.o /Users/ikko/Desktop/Test2/Cucom-App/
node_modules/@react-native-community/datetimepicker/ios/
RNDateTimePickerShadowView.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(in target 'RNDateTimePicker' from project 'Pods')
(1 failure)
だめだー!xCodeで開いてみる。
RNDateTimePickerShadowView.m:60:9: error: call to undeclared function
'RCTLogWarn'; ISO C99 and later do not support implicit function declarations
うーん、難しい。今日は終わります。
この記事が気に入ったらサポートをしてみませんか?