2015-11-16 4 views
9

Ich benutze reagieren nativen 0.14.2. Ich habe diese Frage auf github gestellt, aber das Repo ist überwältigend durch zu viele Probleme. Ich hoffe, ich kann die Antwort hier finden.Wer Erfolg bei der Verwendung von lokalen Bild in native für Android reagieren?

hier So ist die Projektstruktur:

android-project 
+---app 
| \---src 
|  \---main 
|   \---assets 
|   \---java 
|   \---res 
+---reactnative 
| \---assets 
|  \[email protected] 
|  \[email protected] 
|  \[email protected] 
----index.android.js 

der Code Hier ist das Bild zu zeigen:

<Image 
    source={require('./reactnative/assets/image.png')} 
    resizeMode='contain' 
    style={styles.image} /> 

Der obige Code funktioniert gut, wenn mit localhost react-native start zusammen laufen. Aber es funktioniert nicht nach dem Bündeln reagieren einheimische Ressourcen in die apk:

react-native bundle --platform android -dev false --entry-file index.android.js \ 
--bundle-output app/src/main/assets/index.android.bundle \ 
--assets-dest app/src/main/res/ 

Hier ist die Ausgabe:

android-project 
+---app 
| \---src 
|  \---main 
|   \---assets 
|    \---index.android.bundle 
|   \---java 
|   \---res 
|    \---drawable-xxxhdpi 
|     \---reactnative_assets_image1.png 
|    \---drawable-xxhdpi 
|     \---reactnative_assets_image1.png 
|    \---drawable-xhdpi 
|     \---reactnative_assets_image1.png 
|    \---drawable-mdpi 
|     \---reactnative_assets_image1.png 

Ist es der richtige Weg, um die apk zu erzeugen, mit nativer reagieren? Bitte beheben Sie die Probleme. Vielen Dank!

+0

Haben Sie die Upgrade-Anweisungen hier folgen: https://facebook.github.io/react-native/docs/upgrading.html –

+0

Sind Sie unter Windows? Scheint so, als ob das neue System einige Dinge kaputt gemacht hat. Wenn ja, können Sie https://github.com/facebook/react-native/issues/4207 nach einer Lösung suchen. – Almouro

+0

@DaveSibiski Ich begann mit 0.14.2 direkt für ein bestehendes Projekt, also glaube ich nicht, dass ich etwas upgraden muss. –

Antwort

0

möchten Sie vielleicht https://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-android-app aussehen besuchen Sie abfragen, im Grunde stellen Sie Sie Code wie <Image source={require('./ res/check.png')} /> mit den JS-Dateien und Ihre Bilder in den ziehbar Ordner setzen zB check.png in android/app/src/main/res/drawable-hdpi

+0

Sie können meine Frage überprüfen. Ich könnte die App gut mit localhost ausführen. Aber nachdem ich die Assets erzeugt und die js-Datei gebündelt hatte, konnte ich kein Bild sehen. –

1

wenn require() in Standard-JS verwenden, den Pfad gegeben ist relativ, daher müssen alle angegebenen Pfade relativ zu der Datei sein, in der Sie sie benötigen. Der beste Weg, dies zu tun, ist nicht, sie in den Verzeichnissen 'android' und 'ios' zu haben, sondern eine separate mit Ihre Apps JS Code ein, und speichern Sie die Bilder dort, auf diese Weise werden die Pfade viel kürzer und nicht anders pro OS.