フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

Windows環境にReact Nativeのexpoをインストールする

ExpoCLIインストール

expo.io

npm install expo-cli --global

expoのバージョンを確認する

  • PowerShellで実行すると下記のエラーが発生する
> expo --version
expo : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\expo.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.c 
om/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ expo --version
+ ~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
PS C:\Users\xxxxx\react_native> PowerShell Get-ExecutionPolicy
  • PowerShellスクリプトの実行が実行ポリシーによって許可されていないことが原因。管理者権限でPowershellを起動し、ポリシーの確認を行う。

f:id:PX-WING:20200611212431p:plain

  • 起動したpowershellのターミナルでPowerShell Get-ExecutionPolicy コマンドを実行し、ポリシーを確認する
> PowerShell Get-ExecutionPolicy

Restricted
> PowerShell -ExecutionPolicy RemoteSigned  expo
> PowerShell Set-ExecutionPolicy RemoteSigned
  • expoのバージョンを確認するとエラーがおきなくなりました。
> expo --version
3.21.5
PS C:\Users\81703\react_native> 

expo アカウントを作成する

  • 下記のサイトからアカウントを作成する expo.io

  • アカウント作成後、ターミナルに戻り、expo loginコマンドを実行する. 上記で作成したアカウントのメールアドレスとパスワードを入力する。

> expo login
? Username/Email Address: hogehoge@hogehoge.com
? Password: [hidden]

Success. You are now logged in as hogehoge.

プロジェクトの作成

expo init hoge

Managed workflowモードはexpoのサポート配下で簡単に開発できるモード、Bare workflowはExpoの機能は利用せず、カスタマイズ性が高いが、難易度が少し高くなるため、Managed workflowのblankを設定します。

----- Managed workflow -----
> blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

プロジェクト起動

expo start

f:id:PX-WING:20200611215116p:plain