Help us understand the problem. What is going on with this article?

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

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を見た方が、より詳しくログが見れます。

kaba
React Native製アプリのヤミーを運営しています。Expo製なので、expoを実務で使う前にインストールしてみて下さい。https://play.google.com/store/apps/details?id=com.kabainc.yummy&hl=ja
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away