Reagieren Nativen Android - Statische Ressourcen, die nicht Zeigen

Ich versuche nur, ein Bild zu laden, als eine statische Ressource. Hier ist ein Beispiel, das gibt mir ein leerer weißer Bildschirm.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View
} = React;

var impowerz = React.createClass({
  displayName : "Login",
  render: function() {
    return (
     <View style={styles.container}>
      <Image source={require('image!bg-splash')} style={styles.bg} />
     </View>
    );
  }
});

var styles = StyleSheet.create({
  bg : {
    height: 667,
    width: 375
  },
  container: {
    flex: 1,
  },
});

AppRegistry.registerComponent('impowerz', () => impowerz);

Überprüfte ich im Chrome-Debugger und das ist, was ich bekam

[![Chrome-Debugger sieht meine statische Ressource][1]][1]

Bearbeiten ich wickelte das image-tag in einer Ansicht und fügte hinzu, eine flex: 1 styles für die container

Update ich versuchte, Sie zu trösten.log() die assetsRoot Eigenschaft in react-native/packager/packager.js und es kam zurück als /impowerz/assets/das ist, wo mein Bild lebt. Ich machte ein @2x und @3x vorgeschlagen [bei dieser Antwort][2]

Versuchte ich mit .jpg statt .png-Bilder und versucht, anstelle require('Bild!bg_splash') mit {uri: 'assets/image/bg_splash.jpg'} (mit und ohne ext).

Hast du eine Lösung gefunden?

InformationsquelleAutor JacobRossDev | 2015-09-15

android react-native

5

Wie Sie hinzufügte "bg-splash", um Ihre android-app? Es sollte gehen unter android/app/src/main/res/drawable (oder drawable-hdpi, -xhdp etc, wenn Sie haben die andere version per DPI). Berücksichtigen Sie auch, dass android nur akzeptieren, Ressourcen-Namen, die Kleinbuchstaben enthalten und Unterstrichen, so dass Ihre Bild-name entspricht nicht dieser Anforderung, da es enthält Bindestrich-Zeichen.
- Ich Konsole.log() die assetsRoot Eigenschaft in react-native/packager/packager.js und es kam zurück als /impowerz/assets/. Ich fand das Verzeichnis, das Sie erwähnt, und ich glaube nicht, dass das die richtigen sind. Es ist bereits eine Datei vorhanden, so versucht require('image!ic_launcher') und ich erhielt eine unknown module Fehler. Auch habe ich bereits versucht, meine Bild-name mit einem Unterstrich und das hat auch nicht geholfen. Ich benutzte dies als Verweis stackoverflow.com/questions/29308937/.... Können Sie mir zeigen, wo finden Sie Ihre Antwort?
- kzzzf korrekt ist. Sie benötigen, um Ihre Bilder in der drawable-hdpi -xhdp etc Ordner. Mach dir keine sorgen, was die packager sagte Sie der assetsRoot ist. Ich habe ein Projekt, wo statische Bilder, die einfach gut funktionieren. Hier ist es in den docs: facebook.github.io/reagieren-native/docs/...
InformationsquelleAutor kzzzf
4

in reagieren-native v. 0.14+
```
 //same syntax for IOS and Android
 require('./my-icon.png')
```
Full Image docs hier

Als 0,14 release, Reagieren Native bietet eine einheitliche Verwaltung der Bilder in Ihre iOS-und Android-apps. Hinzufügen eines statischen Bildes, um Ihre app, platzieren Sie es irgendwo in Ihrem Quellcode-Baum, und verweisen darauf, wie diese:
```
 <Image source={require('./my-icon.png')} />

//relative path
.
├── button.js
└── img
   ├── [email protected]
   └── [email protected]
```
- Nur um die Verwirrung hinzuzufügen, wie es scheint, Vektor Drawables werden nicht unterstützt. Dass man das Thema zusammen mit den unterschiedlichen Möglichkeiten zur Einbindung von Bilder, die wirklich warf mich für eine Schleife.
- das ist neu in 0.14+ . auf diese Weise ist es einfacher , für die cross-Plattform Android\ios-Lösung
InformationsquelleAutor doron aviguy
3

Konnte ich nicht, meine Bilder zu zeigen, bis entweder.

Als ich ging, um <yourapp>/android/app/src/main/res waren es nur mipmap-<qualifier> Ordner. Ich zuerst die Bilder in diesen Ordnern. Hat nicht funktioniert. Mein Leseverständnis müssen natürlich aktualisieren, da in der Anweisungen, es sagt ganz klar "drawable." Dann machte ich den Fehler zu denken, dass diese "mipmap" Ordner geändert werden muss, um "drawable" - Ordner (in dem Ort, der "mipmap"). Also wenn jemand das täte, backtrack, und fügen Sie stattdessen den drawable-<qualifier> Ordner in neben auf den "mipmap" ersetzt. Und dann stellen Sie sicher, dass zum kompilieren der app.

InformationsquelleAutor KirRogue
0

Um das Bild zu zeigen, auf dem Bildschirm, setzen Sie das Bild in einer Ansicht:
```
return (
    <View
        style={styles.container}>
            <Image source={require('image!bg-splash')} style={styles.bg} />
    </View>
);
```
Und fügen Sie diese Stile, um die Ansicht
```
var styles = StyleSheet.create({
    container: {
        flex: 1,
    },
```
- Hi Greg. Ich versuchte Ihren Vorschlag und ich bin noch immer ein leerer Bildschirm. Ich bearbeitet meine Frage entsprechend beantworten, damit ich nicht bekommen, der gleiche Vorschlag von anderen.
InformationsquelleAutor Greg Oden

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.