WindowsでのReact Nativeの環境構築に躓いた話
React Nativeがアツい
React Nativeとは端的に言うとReactで書いたプログラムがAndroidやiOSで動いてしまうというすごい技術です。
Reactを用いて外部APIとの連携をするSPAを普段から書いているエンジニアにとってとても有用なモノなのではないか（と思っている）。
AndroidやiOSのアプリが吐けるわけなので、Windows用にも当然(?)アプリを吐くことができ、デバッグも容易そうだ（と思っている）。
一時期Xamarinにも興味を持った私ですが、Cで書いたネイティブのライブラリを使用するなどの用途でない場合は Xamarinを使う必要ないのではないかとまで考えています。
React Native環境構築
とりあえず環境構築をしなければ始まらない、ということで備忘です。
私はどちらかというとWindows用のアプリを吐ける、ということに興味を持ったのでLinuxでもMacでもなく Windowsで環境構築を行っていきます。
nodeのインストール
まずはnode.jsを入れます。私は適当に8.11.2のzipをダウンロードしてきてPATHを通しました。詳しく書いているサイトがほかにあるはずなのでこちらはそれを参照してほしいです。
使ってみるとnpmのバージョンが古いといわれるのでバージョンを上げます。
こちらはnpm install -g npmするだけかと思いきや、「既にファイルがあるぞ」と怒られるので、npmやnpm.cmd、npxやnpx.cmdといったファイルをそれぞれ
npm_old, npx_oldなどにリネームしてから
npm_old install -g npmとして回避しました。
react-nativeアプリの生成ツールのインストール
create-react-native-appというReact Nativeアプリを作ってくれるnpmパッケージがあります。便利ですね。
npm install -g create-react-native-app
アプリの生成
create-react-native-app AwesomeProject
ワンコマンドでいろいろと揃えてくれます。便利ですね。
アプリの実行
cd AwesomeProject npm start
これを実行するだけで立ち上がります（ということになっています）。
環境構築で躓いた点
Error: Invalid sdkVersion. 問題
Error running adb: socket hang up 問題
要は
Proxyがいろいろと悪さをしていました。内部でaxiosというHTTPリクエストを送るライブラリが使用されているのですが、そこで通信をするときにHTTP_PROXYという環境変数を見ていて、それが不適切だと通信に失敗し必要なものがダウンロード・インストールされていなかった、というのが原因みたいでした。
つまりエラー表示が不適切！という感じでした
終わりに
ちょっと時間がないので解決方法について詳細な手順を書く暇がありません。もし需要があればコメントなりで反応してくれれば書きますので。
最後の最後に
また、今回はcreate-react-native-appというスクリプトを使ってReact-Nativeの雛形を作るということを試してみましたが、どうもこの方法で作ったアプリケーションでは、visual studio codeのreact-native用の拡張機能が正しく動作しないようです。
まぁreact-native-cliスクリプトを使ってアプリを作りましょう、というのが私の最終的な結論になりそうです。
