LoginSignup
32
17

More than 3 years have passed since last update.

react-native linkとは何なのか? react-native3分講座

Last updated at Posted at 2018-09-18

alt

何々react-nativeのデザインはnative baseというライブラリを使ってみるといいの?
それじゃあ
yarn add native-base
react-native link native-base
だ!

ちょっと待ったそこのあなた。今軽々しくreact-native linkを使いましたね。
react-native linkは、jsだけは実現できないos毎に分けて記述された、objective-cやjavaのコードを自動で設定してくれる便利コマンドですが、理解していないと落とし穴にはまりますよ。

今回は
「react-native linkは何をしているのか?」
をreact-native linkを「手動」で行いながら学んでいきます。

それでは手動でreact-native linkを行ってみましょう。

Step 1

もし、ライブラリがnativeコードを含んでいる場合、フォルダの中に必ず、.xcodeprojというファイルがあります。
ファインダーで、node_modules以下の該当ライブラリのフォルダを開き、xcodeのLibrariesフォルダに、ドラッグ&ドロップしましょう。
image1.png

Step 2

次にxcodeのmainプロジェクトをクリックします。次に、xcodeの真ん中にあるタブからBuild Phasesをクリック。
「Link Binary With Libraries」の中にドラッグ&ドロップします。
image2.png

完了です。

Step 3

一部のライブラリは以下の操作が必要です。
ライブラリはnative側で呼ばれますか??それともjs側で呼ばれますか?
もし、js側で呼び出されるなら、このStepは読む必要はありません。

nativeから呼ばれない場合、ライブラリのheaderを知る必要があります。
headerを知るには、xcodeのmainプロジェクトをクリックし、、Build Settingsタブをクリックします。次にSearch Pathをクリックします。
するとHeader Search Pathが出てくるのでそのライブラリへのパスを含めましょう。
image3.png

以上!
簡単でしたね。
以上の3ステップがreact-native linkコマンドが行っていることです。

おまけ

react-native linkされたライブラリが吐くエラーは「native」のエラーです。よってiosシミュレーターに詳細なエラー表示はされません
xcodeを開き、xcodeのログを確認しましょう。驚くほどわかりやすいエラーが書いてあります。

なのでreact-native linkしたのにうまくいかない。そんな時はxcodeからrunしてログを見ましょう。xcode左上の!のついた▲を押すとログを見れます。ログから赤文字を探してググりましょう。

ios シュミレーターのdebug > open systemlogではなく、xcodeのビルド時のログを見るため、xcodeを見た方が、より詳しくログが見れます。

32
17
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
17