極速構成expo+react-native運転環境

7769 ワード

まずnodeおよびnpmをインストールする必要があります.次にnpmのグローバルprefixおよびcacheディレクトリを環境変数に追加し、npmのグローバルインストールの依存性をyarnなどの直接実行できるようにします.
ここでexpo+react-nativeを構成するには、create-react-native-appでプロジェクトディレクトリを作成し、expo-cliでプロジェクトを開始し、プロジェクトをパッケージ化し、パブリッシュします.
携帯電話端末をよりよく体験するためには、expoクライアントで閲覧することをお勧めします.アンドロイドとiosバージョンがあります.現在、iosバージョンはstoreから撤去されているようです.

yarn依存管理ツールのインストール


より高速な依存インストールツール(実際には最初の依存インストール時にキャッシュされます)では、キャッシュディレクトリが大きくなりますが、yarnを使用して依存をダウンロードすることをお勧めします.
$ npm i -g yarn
$ yarn global bin # yarn     
$ yarn global dir  # yarn          

#   :
$ yarn config set global-folder D:\env
odejs
ode_global $ yarn config set cache-folder D:\env
odej
ode_cache

コマンドライン足場の取り付け

$ npm i -g create-react-native-app expo-cli exp

#      yarn    
$ yarn global add create-react-native-app expo-cli exp

プロジェクトディレクトリの作成


create-react-native-appを使用して、他の初期モジュールをプリセットしたプロジェクトディレクトリを作成することができます.個人的には、直接デフォルトで良いと思います.
$ npx create-react-native-app [   ]

>      default 

途中npm installでプロセスが遅い場合は、yarnインストールプロジェクト依存を手動で使用することをお勧めします.

うんてん

# npm   
$ npm run android
$ npm run web
$ npm run ios

#      yarn     
$ yarn android
$ yarn web
$ yarn ios

もちろんexpo start --webなどのコマンドを直接使用することもできます
起動するとdev-toolsのwebサーバが起動します.デフォルトのポートは19000ですが、このサーバはアプリケーションを傍受するためのサーバです.例えば、コードの一部にconsoleがあります.ロゴ、このサービスは印刷されます
コマンドラインが正常に実行されると、expoクライアントがスキャンしてアクセスできるQRコードであり、携帯電話で直接このアプリを実行することができるQRコードがあります.
expoクライアントは入力も可能exp://192.168.8.170:19000現在のサーバー・アドレス・アクセス
現在のプロジェクト作成packageを添付します.jsonおよびexpoクライアントバージョン
package.json
{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "expo": "~37.0.3",
    "expo-splash-screen": "^0.2.3",
    "expo-updates": "~0.2.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.5",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-screens": "~2.2.0",
    "react-native-unimodules": "~0.9.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "babel-jest": "~25.2.6",
    "jest": "~25.2.6",
    "react-test-renderer": "~16.9.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}


expoクライアントバージョン:2.15.4

リファレンスリンク


create-react-native-app github公式サイトexpo cli足場github公式サイトexpo公式サイトreact-native公式サイトreact-native中国語網yarn cliコマンドヘルプドキュメント