関数 - android webview 値 受け渡し




AndroidはJSバンドルを読み込めませんでした (16)

Nexus5(android 5.1.1)でAwesomeProjectを実行しようとしています。

プロジェクトをビルドして、デバイスにインストールできます。 しかし、それを実行すると、赤い画面が表示されました

JSバンドルをダウンロードできません。 開発サーバーの起動またはデバイスの接続を忘れましたか?

React Native iOSでは、jsbundleをオフラインでロードすることを選択できます。 Androidでも同じことができますか? (または、少なくとも、サーバーアドレスをどこで構成できますか?)

更新

ローカルサーバーで実行するには、react-nativeプロジェクトのルートディレクトリで次のコマンドを実行します

  1. react-native start > /dev/null 2>&1 &
  2. adb reverse tcp:8081 tcp:8081

詳細についてはdsissitkaの回答をご覧ください。

サーバーなしで実行するには、次を実行してjsfileをapkにバンドルします。

  1. android/app/src/main 下にassetフォルダーを作成します
  2. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

詳細については、kzzzfの回答をご覧ください。


Androidのアプリでメニューを開きました(Genymotionのコマンド+ M)->開発設定->デバイスのサーバーホストとポートのデバッグ

値をlocalhost:8081に設定します

それは私のために働いた。


Android(リリース)でアプリを実行する簡単な手順は次のとおりです。

1.アプリケーションルートに移動します。

2.このコマンドを実行します。

反応ネイティブバンドル--platform android --dev false --entry-file index.android.js --bundle-output android / app / src / main / assets / index.android.bundle --assets-dest android / app / src / main / res

すべてのファイルがコピーされます。

3.署名済みAPKを作成します。

Androidスタジオを開きます。

ビルド>署名済みAPKの生成> [必要な詳細を入力、この手順の前にキーストロークを生成する必要があります]

APKはエラーなしで生成されます。 デバイスにインストールすると、問題なく動作するはずです。

また、デバイスを接続して、テストのためにAndroid StudioのRunアイコンを直接押すこともできます。

キーストロークの生成:

  1. C:\ Program Files \ Java \ jdkx.x.x_x \ binに移動します

  2. 走る

keytool -genkey -v -keystore d:\ my_private_key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

おそらくいくつかの詳細を入力するように求められます。 それを行うと、apkに署名するために使用できるキーストロークファイル( my_private_key.keystore )があります。


Linuxで、 react-native run-android プロセスを停止した後にこれを取得していました。 ノードサーバーはまだ実行中のようですので、次に実行するときには、適切に実行されず、アプリは接続できません。

ここでの修正は、Xtermで実行中のノードプロセスを強制終了することです。このプロセスは、そのウィンドウを ctrl-c する(簡単)か、 lsof -n -i4TCP:8081 を使用して見つけることができます。

次に、 react-native run-android 再度 react-native run-android します。


Ubuntu 14.04で動作する簡単なソリューション。

react-native run-android

エミュレーター(既に起動されている)は以下を返します。JSバンドルをダウンロードできません。 JSサーバーを再起動します。

react-native start

エミュレータでReload JSを押します。 それは私のために働いた。 それが役立つことを願っています


Wi-Fi接続を確認してください。

別の可能性としては、wifiに接続していないか、間違ったネットワークに接続しているか、またはdev設定でIPアドレスが間違っている可能性があります。 何らかの理由で、私のアンドロイドが無線LANから切断され、知らずにこのエラーが発生し始めました。


react-nativeディレクトリから npm start を実行するとうまく いき ました。


このエラーは、次の手順で簡単に解決できます。

    //run the command at /android sdk / platforms-tool folder
        adb reverse tcp:8081 tcp:8081

    //now come to root folder of your app
    1. npm start
    2. create 'assets' folder inside rootApp/android/app/src/main/
    3. curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
    4. make sure anyone physical or virtual device attached is running.
    5. react-native run-android

この問題を修正するには、 公式ページ に記載されている指示に従ってください。 この問題は、JSバンドルが開発システム上にあり、実際のデバイス内のアプリがその場所を認識していないため、 実際のデバイスで 発生します。



わかりました、私は問題がここにあるものを考え出したと思います。 それは私が走っていた watchman のバージョンと関係がありました。

新しいシェルで、 brew update 実行してから: brew unlink watchman then: brew install watchman

これで、プロジェクトフォルダーから react-native start 実行できます

このシェルを開いたままにして、新しいシェルウィンドウを作成して、プロジェクトフォルダーから react-native run-androidreact-native run-android ます。 すべては世界に合っています。

追伸 私はもともとwatchmanのバージョン3.2でした。 これにより、3.7にアップグレードされました。

pps。 私はこれに慣れていないので、それはソリューションへの迅速なルートではないかもしれませんが、私にとってはうまくいきました。

*デバイスで実行/デバッグするための詳細情報*

エミュレーターではなくAndroidデバイスにアプリをデプロイすると、「 Unable to load JS Bundle 」というエラーが 表示され 赤い画面が表示されること があります。 デバイスのデバッグサーバーを、react ...の名前またはIPアドレスを実行しているコンピューターに設定する必要があります。

  1. デバイスの Menu ボタンを押します
  2. Dev Settings 選択
  3. Debug server host for device 選択 Debug server host for device
  4. マシンのIPを入力し、JSにリロードポートを追加します(例: 192.168.1.10:8081 : 192.168.1.10:8081

詳細: http : //facebook.github.io/react-native/docs/running-on-device-android.html


プロジェクトディレクトリから、実行します

react-native start

次を出力します。

$ react-native start
 ┌────────────────────────────────────────────────────────────────────────────┐ 
   Running packager on port 8081.                                             
                                                                              
   Keep this packager running while developing on any JS projects. Feel       
   free to close this tab and run your own packager instance if you           
   prefer.                                                                    
                                                                              
   https://github.com/facebook/react-native                                  │ 
                                                                              
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /home/user/AwesomeProject 


React packager ready.

[11:30:10 PM] <START> Building Dependency Graph
[11:30:10 PM] <START> Crawling File System
[11:30:16 PM] <END>   Crawling File System (5869ms)
[11:30:16 PM] <START> Building in-memory fs for JavaScript
[11:30:17 PM] <END>   Building in-memory fs for JavaScript (852ms)
[11:30:17 PM] <START> Building in-memory fs for Assets
[11:30:17 PM] <END>   Building in-memory fs for Assets (838ms)
[11:30:17 PM] <START> Building Haste Map
[11:30:18 PM] <START> Building (deprecated) Asset Map
[11:30:18 PM] <END>   Building (deprecated) Asset Map (220ms)
[11:30:18 PM] <END>   Building Haste Map (759ms)
[11:30:18 PM] <END>   Building Dependency Graph (8319ms)

以下は、Ubuntu 14.04で動作するようにしました。

cd (App Dir)
react-native start > /dev/null 2>&1 &
adb reverse tcp:8081 tcp:8081

更新 :参照

更新2 :@scgoughこのエラーは、React Native(RN)がワークステーションで実行されている開発サーバーからJavaScriptを取得できなかったために発生しました。 これがなぜ起こるのかはここで確認できます:

https://github.com/facebook/react-native/blob/42eb5464fd8a65ed84b799de5d4dc225349449be/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java#L116-L137

RNアプリは、Genymotionまたはエミュレーターを使用していることを検出すると、GENYMOTION_LOCALHOST(10.0.3.2)またはEMULATOR_LOCALHOST(10.0.2.2)からJavaScriptをフェッチしようとします。 それ以外の場合は、デバイスを使用していると想定し、DEVICE_LOCALHOST(localhost)からJavaScriptを取得しようとします。 問題は、devサーバーがデバイスではなくワークステーションのlocalhostで実行されることです。したがって、それを機能させるには、次のいずれかが必要です。


携帯電話からアプリを削除してください! 私はいくつかのステップを試しましたが、最終的にはそれができました。

  1. 以前にアプリを実行しようとしたが失敗した場合は、Androidデバイスから 削除 します。
  2. $ react-native run-android
  3. Androidデバイスのアプリ内からReact Rage Shakeメニューを開き、 Dev Settings に移動してから、デバイスの Debug server host & port for deviceDebug server host & port for device 。 サーバーのIP(コンピューターのIP)とホスト 8081 入力します(例: 192.168.50.35:8081 : 8081 )。 Macでは、 System Preferences -> Network -> Advanced... -> TCP/IP -> IPv4 Address コンピューターのIPを見つけることができます。
  4. Rage Shake Menuをもう一度開き、 Reload JS をクリックします。

新しいReact Native(確実に0.59)では、デバッグ構成は android/app/src/debug/res/xml/react_native_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
  </domain-config>
</network-security-config>

最初の質問 は、物理デバイスにアプリケーションをリロードすることについてでした。

物理デバイスでアプリケーションをデバッグしているとき(つまり、adb経由)、デバイスの左上の「アクション」ボタンをクリックしてJSバンドルをリロードできます。 これにより、オプションメニューが開きます(JSをリロード、リモートでデバッグ...)。

お役に立てれば。


デバイスで実行中

別の答えを見つけました。

  • adb reverse:Android 5.0+(API 21)でのみ動作します。
  • 別の方法:デバイスを振って開発者メニューを開き、開発 設定 に移動し 、デバイスのデバッグサーバーホストに移動 して、 マシンのIPアドレス ローカル 開発 サーバー ポートを入力します






react-native