Tech

ReactNative環境構築[Android/iOS]

投稿日:

はじめに

こんにちは、nukkyです。
しばらくブログの執筆からは離れていたので久々のブログになりますが、今回はReactNativeの環境を構築し、AndroidとiOSのシミュレータで実行するまでやっていきたいと思います。

準備

HomeBrewをインストール

Mac用のパッケージマネジメントツール、大抵のパッケージをインストール・管理できますし開発者なら大体入れてると思いますが念のため。

これでインストールできます。

node.jsのインストール

これで、node.jsがインストールされます、後述で使用するnpmコマンドも使用できるようになります。

Watchmanのインストール

これでインストールされます。

React Native CLIのインストール

npmでインストールします。これでReactNativeの準備は完了です。

サンプルプロジェクトの作成

これで準備は完了です!

iOSシミュレータでの実行

Xcodeのインストール

まずはiOSの開発環境であるXcodeをインストールします。XcodeはAppStoreで公開されているのでAppStoreからインストールしてください。

実行

準備で作成したHogeProjectのディレクトリからターミナルで以下のコマンドを実行してください。

これでビルドが始まり、iOSのシミュレータが起動します。

シミュレータを指定して起動

このコマンドで利用できるデバイスがわかるので、利用できるデバイスのシミュレータを以下のように指定して起動することができます。

 

Androidシミュレータでの起動

Android Studioのインストール

公式からAndroid Studioをダウンロードしてファイルを実行するとセットアップが始まるのでインストールを進めてください。

仮装デバイスの作成

「AVD Manager」で仮装デバイスを作成します。
・Android Studio で、[Tools] > [Android] > [AVD Manager] を選択します。
・ツールバーから [AVD Manager] AVD Manager アイコン をクリックします。
・Android Studioの起動画面から[Configure] > [AVD Manager] を選択します。
「AVD Manager」を開いたら[Create Virtual Device…]を選択し作成可能なデバイスの一覧が表示されるので画面の指示に従い仮装デバイスを作成してください。

実行

仮装デバイスを実行した状態で、以下のコードを実行してください。

 

さいごに

勉強がてらReactNativeを初めて見ましたが、楽しくなってきたのでこれからもReactNativeの記事を書いていきますのでよろしくお願いします。

 

おすすめ書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE) React.js&Next.js超入門

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

【iOS14】App Groups を使用して WidgetKit にデータ共有

1 はじめに2 App Groupsの準備2.1 App Groupsの許可2.2 App Groupsの使い方3 WidgetKitにデータ共有4 さいごに5 おすすめ書籍 はじめに 今回はアプリ側 ...

ReactNative入門

1 はじめに2 そもそもReact Nativeとは3 JSXとは3.1 JSXに値を埋め込む3.2 属性の値を設定する3.3 関数でJSXを作る4 コンポーネントとは4.1 再利用性4.2 新規コン ...

ReactNativeデータ永続化

1 はじめに2 データ永続化の方法3 AsyncStorage4 react-native-async-storage4.1 インストール4.2 実装5 Realm5.1 インストール5.2 redu ...

Go言語

[Go初心者]テストについて学習

1 はじめに2 テスト2.1 エラーの値を比較する2.2 エラーの型を比較する3 httptest3.1 httptestの使い方4 さいごに5 おすすめ書籍 はじめに 今回はGo言語のテストについて ...

【Unity】Raycastを利用して接地判定を行う

1 はじめに2 今回やりたいこと3 色々な接地判定4 Rayとは5 接地判定6 ジャンプのコードを記述7 さいごに8 おすすめ書籍 はじめに こんにちはsuzukiです。久しぶりにunityを触り色々 ...

フォロー

blog-page_side_responsive

2019年5月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。