react-native (「オムニバー」とWebView ) で構築されたモバイル Web ブラウザーの非常に大まかなスケッチ。ブラウザは、(現在サポートされていない) 分散プロトコル (現在DAT ) のトランスポートとして機能するゲートウェイ API (最終的には GitHub にも公開する可能性があります) とインターフェースします。
const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )
app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )
app . use ( function ( req , res , next ) {
const orig = req . url
const { referer , host } = req . headers
if ( referer && / ^(/) / . test ( req . url ) ) {
// account for relative asset paths
const folder = referer . replace ( `http:// ${ host } /` , '' )
res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
}
next ( )
} )
app . get ( '/dat/:key' , ( req , res ) => {
const { key } = req . params
Dat ( `./dats/ ${ key } ` , {
key : key
} , function ( err , dat ) {
if ( err ) throw err
dat . joinNetwork ( { } , _ => {
res . json ( {
url : `http:// ${ host } : ${ port } / ${ key } `
} )
} )
} )
} )
app . listen ( port , _ => console . log ( startUpMsg ) )このプロジェクトは、Create React Native App を使用してブートストラップされました。
以下に、一般的なタスクの実行に関する情報を示します。このガイドの最新版はここから入手できます。
create-react-native-appのグローバル インストールを更新する必要があるのは非常にまれであり、まったく更新する必要がないのが理想的です。
アプリのreact-native-scripts依存関係の更新は、 package.jsonのバージョン番号を上げてプロジェクトの依存関係を再インストールするのと同じくらい簡単です。
React Native の新しいバージョンにアップグレードするには、 react-native 、 react 、およびexpoパッケージのバージョンを更新し、 app.jsonで正しいsdkVersionを設定する必要があります。パッケージのバージョンの互換性に関する最新情報については、バージョン管理ガイドを参照してください。
プロジェクトの初期化時に Yarn がインストールされていた場合、依存関係は Yarn 経由でインストールされているため、これらのコマンドの実行にも Yarn を使用する必要があるでしょう。依存関係のインストールとは異なり、この記事の執筆時点では、コマンド実行構文は Yarn と NPM で同一です。
npm startアプリを開発モードで実行します。
スマートフォンの Expo アプリで開いて表示します。ファイルへの編集内容を保存すると再ロードされ、ターミナルにビルド エラーとログが表示されます。
場合によっては、React Native パッケージャーのキャッシュをリセットまたはクリアする必要がある場合があります。これを行うには、 --reset-cacheフラグを開始スクリプトに渡します。
npm start --reset-cache
# or
yarn start --reset-cache
npm testテストで jest テスト ランナーを実行します。
npm run ios npm startと似ていますが、Mac を使用していて iOS シミュレータがインストールされている場合は、iOS シミュレータでアプリを開こうとします。
npm run android npm startと似ていますが、接続された Android デバイスまたはエミュレータ上でアプリを開こうとします。 Android ビルド ツールのインストールが必要です (詳細なセットアップについては、React Native のドキュメントを参照してください)。 Android エミュレーターとして Genymotion をインストールすることもお勧めします。ネイティブ ビルド環境のセットアップが完了したら、React Native App の作成で使用できるadbの適切なコピーを作成するには 2 つのオプションがあります。
adb使うSettings -> ADBに移動します。 「カスタム Android SDK ツールを使用する」を選択し、Android SDK ディレクトリで更新します。 adb使う/Applications/Genymotion.app/Contents/MacOS/tools/です。npm run ejectこれにより、Create React Native App のビルド スクリプトから「取り出す」プロセスが開始されます。プロジェクトをどのように構築したいかについて、いくつかの質問が表示されます。
警告:イジェクトの実行は、(使用しているバージョン管理システムとは別に) 永続的なアクションです。アプリを排出するには、Xcode および/または Android Studio 環境をセットアップする必要があります。
app.json編集して、 expoキーの下に構成キーを含めることができます。
アプリの表示名を変更するには、 app.jsonのexpo.nameキーを適切な文字列に設定します。
アプリのアイコンを設定するには、 app.jsonのexpo.iconキーをローカル パスまたは URL に設定します。透明度のある 512x512 の png ファイルを使用することをお勧めします。
このプロジェクトは、テストに jest を使用するように設定されています。好きなテスト戦略を構成できますが、jest はそのまま使用できます。 __tests__という名前のディレクトリにテスト ファイルを作成するか、jest によってファイルがロードされるように.test拡張子を付けます。テスト例については、テンプレート プロジェクトを参照してください。 jest ドキュメントも、React Native テスト チュートリアルと同様に素晴らしいリソースです。
環境変数を使用して、Create React Native App の動作の一部を構成できます。
プロジェクトを開始すると、プロジェクト URL に次のような内容が表示されます。
exp://192.168.0.2:19000
その URL の「マニフェスト」は、Expo アプリにアプリの JavaScript バンドルを取得してロードする方法を指示するため、 exp://localhost:19000のような URL 経由でアプリにバンドルをロードした場合でも、Expo クライアント アプリは引き続き起動スクリプトが提供する IP アドレスでアプリを取得します。
場合によっては、これは理想的ではありません。これは、仮想マシン内でプロジェクトを実行する必要があり、デフォルトで印刷する IP アドレスとは異なる IP アドレスを介してパッケージャーにアクセスする必要がある場合に当てはまります。 Create React Native App によって検出された IP アドレスまたはホスト名をオーバーライドするには、 REACT_NATIVE_PACKAGER_HOSTNAME環境変数を介して独自のホスト名を指定できます。
Mac と Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Windows:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
上記の例では、開発サーバーはexp://my-custom-ip-address-or-hostname:19000でリッスンします。
Create React Native App は、アプリのセットアップと開発をシンプルかつ簡単にするために多くの作業を行いますが、ホストされたサービスに依存せずに Apple の App Store または Google の Play ストアにデプロイするために同じことを行うのは非常に困難です。
Expo は、CRNA によって作成された JS 専用アプリの無料ホスティングを提供し、Expo クライアント アプリを通じてアプリを共有できるようにします。これには、Expo アカウントの登録が必要です。
expコマンドライン ツールをインストールし、publish コマンドを実行します。
$ npm i -g exp
$ exp publish
自分でネイティブ コードをビルドせずに配布用の IPA/APK を入手したい場合は、Expo のスタンドアロン ビルドなどのサービスを使用することもできます。
自分でアプリを構築してデプロイしたい場合は、CRNA から取り出して Xcode と Android Studio を使用する必要があります。
これは通常、プロジェクトでnpm run eject実行するのと同じくらい簡単で、プロセスを順を追って説明します。必ず、 react-native-cliをインストールし、React Native のネイティブ コード スタート ガイドに従ってください。
プロジェクトの作業中に Expo API を使用していた場合、通常の React Native プロジェクトに排出すると、それらの API 呼び出しは機能しなくなります。これらの API を引き続き使用したい場合は、「React Native + ExpoKit」にイジェクトすると、独自のネイティブ コードを構築して Expo API を引き続き使用できます。このオプションの詳細については、取り出しガイドを参照してください。
ネットワーク タイムアウトまたは接続の拒否により携帯電話にアプリを読み込めない場合、最初のステップとして、携帯電話とコンピュータが同じネットワーク上にあり、相互に接続できることを確認します。 React Native App の作成にはポート 19000 と 19001 へのアクセスが必要なので、ネットワークとファイアウォールの設定で、これらのポートの両方でデバイスからコンピューターへのアクセスが許可されていることを確認してください。
携帯電話で Web ブラウザを開いて、パッケージャー スクリプトが出力する URL を開いて、 exp://をhttp://に置き換えてみてください。たとえば、端末の QR コードの下に次のように表示されるとします。
exp://192.168.0.1:19000
携帯電話で Safari または Chrome を開いてロードしてみてください
http://192.168.0.1:19000
そして
http://192.168.0.1:19001
これは機能するが、QR コードをスキャンしてもアプリをロードできない場合は、Create React Native App リポジトリで問題を開いて、これらの手順の詳細と受信した可能性のあるその他のエラー メッセージを記載してください。
携帯電話の Web ブラウザにhttp URL を読み込めない場合は、携帯電話のテザリング/モバイル ホットスポット機能を使用し (ただし、データ使用量に注意してください)、コンピュータを WiFi ネットワークに接続し、パッケージャーを再起動してみてください。 VPN を使用している場合は、VPN を無効にする必要がある場合があります。
Mac を使用している場合、 npm run ios実行しようとすると、いくつかのエラーが表示されることがあります。
このような種類のエラーのトラブルシューティングを行うには、次の手順を実行する必要があります。
Command Line Toolsメニュー オプションが何かに設定されていることを確認します。 CLI ツールが Homebrew によって最初にインストールされるとき、このオプションが空白のままになる場合があり、これにより Apple ユーティリティがシミュレータを見つけられなくなる可能性があります。その後、必ずnpm/yarn run ios再実行してください。Reset Contents and Settings...を選択します。それが完了したら、シミュレーターを終了し、 npm/yarn run ios再実行します。QR コードをスキャンできない場合は、携帯電話のカメラの焦点が正しく合っているかどうか、また端末の 2 色のコントラストが十分に高いことを確認してください。たとえば、WebStorm のデフォルトのテーマには、Expo アプリが使用するシステム バーコード スキャナーで端末の QR コードをスキャンできるほど十分なコントラストがない可能性があります。
これにより問題が発生する場合は、ターミナルのカラー テーマを変更してコントラストを高めるか、別のターミナルから Create React Native App を実行してみてください。パッケージャー スクリプトによって出力された URL を Expo アプリの検索バーに手動で入力して、手動でロードすることもできます。
