Zewnętrzny zasób HTML nie jest dołączony przez React Native w kompilacji produkcyjnej do użytku przez Webview

Question

Buduję aplikację dla systemu Android przy użyciu metody React Native. Ma widok internetowy, który odczytuje plik HTML lokalnie.

To jest kawałek kodu, którego używam do renderowania widoku internetowego.

<WebView ref="webview" 
     source={require('./helloworld.html')} 
     javaScriptEnabled style={styles.webView} /> 

Działa to dobrze podczas kompilacji programu. Plik HTML ładuje się w widoku internetowym i wyświetla się poprawnie.

Ale nie na wersji Android/produkcji. Widok internetowy jest pusty i jeśli sprawdzam przy użyciu chrome: // inspect, widok sieci jest pusty i nie ładuje pliku HTML.

Z tego, co rozumiem, wynika, że ​​React Native nie łączy pakietu helloworld.html jako zasobu podczas kompilacji produkcji Androida. Zauważyłem, że działa dobrze na iOS.

Każdy pomysł, jak to naprawić?

Answer 1

Zgodnie z dyskusjami tutaj https://github.com/facebook/react-native/issues/6004, jest to znana wada. Zasoby nie są dołączane do produkcji Androida, ale działają dobrze w wersji dla deweloperów.

Rozwiązaniem jest trwałe przechowywanie aktywów Android folderu ręcznie, a następnie załadować zasobów przy użyciu

<WebView 
    source={{ uri: 'file:///android_asset/helloworld.html' }} 
    startInLoadingState={true} /> 

Answer 2

na iOS kompilacji produkcji tego rozwiązania jest praca

<WebView 
    source={{ uri: 'helloworld.html' }} 
    startInLoadingState={true} /> 

Answer 3

na RN 0,40,

require('./file.html') 

zawodzi dla mnie w wersji Build Release. Jest to dobre w kompilacjach debugowania.

Jako obejście, udało mi się umieścić plik w android aktywów dir, a

{ uri: file:///android_asset/file.html } 

obciążenie stamtąd. Niestety dla mojej sytuacji plik html ładuje zdalne biblioteki firm trzecich, które wewnętrznie odwołują się do zasobów agnostycznych protokołu: np. //domain.com/file.json. Więc wszystkie zostały przekształcone w linki file://domain.com/file.json i oczywiście nie powiodły się. I małpa łata XMLHttpRequest, aby zmienić // ... na https: // ... która rozwiązała ten problem, ale żadne z obrazów, które te biblioteki spróbują wczytać, nie załaduje się. wszystko zepsute. I nie udało mi się znaleźć sposobu na określenie, jak mają wyglądać żądania dla tych obrazów, aby zobaczyć, dlaczego się załamują/nie można załadować.