wake-up-neo.com

Probleme mit dem Bildmodul in React Native

Ich fange gerade erst mit React-Native an und habe Probleme, ein statisches Image zu benötigen.

Hier ist der grundlegende Code, den ich bisher habe:

'use strict';

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

var buzz = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={require('image!bg')}  style={styles.bg}>
          <Text style={styles.welcome}>
            Welcome to Buzz! iOS interface to
          </Text>
          <Text style={styles.welcomeHeader}>Charityware</Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  welcomeHeader: {
    fontWeight: '600',
    fontFamily: 'Helvetica',
    color: '#fff',
    fontSize: 50,
    alignSelf: 'center'
  },
  bg: {
    width: 400,
    height: 300,
    alignSelf: 'auto',

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
  },
});

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

Der Hauptproblembereich ist:

    <Image source={require('image!bg')}  style={styles.bg}>
      <Text style={styles.welcome}>
        Welcome to Buzz! iOS interface to
      </Text>
      <Text style={styles.welcomeHeader}>Charityware</Text>
    </Image>

Beim Packen meiner App und beim Ausführen erhalte ich einen Renderfehler: error image

Ich verstehe, dass Sie Bilder in xcode als Bildergruppe hinzufügen müssen, damit der Aufruf require das Bild finden kann und ein Bildset zu diesem Zweck hinzugefügt hat: bg image

... aber ohne Erfolg. Hat jemand irgendwelche Gedanken? Ich habe die Dokumente gelesen und scheint dies auf die vorgeschriebene Weise zu tun. Vielen Dank!

javascriptiosxcodereactjsreact-native
38
markthethomas

Seit React Native Release 0.14 wurde die Handhabung von Bildern für iOS und Android normalisiert und unterscheidet sich nun. Ich konnte keine Dokumentation außer dieser sehr eindeutigen Festschreibungsnotiz zu Github finden: Neues Asset-System dokumentieren .

Es gibt nur einen Screenshot der vorgeschlagenen Dokumentation:  enter image description here

Update: Es gibt jetzt einen Link für die eigentliche Dokumentation: https://facebook.github.io/react-native/docs/images.html

43
jlapoutre

Ich hatte ein ähnliches Problem und habe dann die Bilddateien im Dateisystem unter den Images.xcassets-Verzeichnissen des xcode project mit Suffixen und Großschreibung umbenannt, um mit dem Bild übereinzustimmen, das ich lade. 

Wenn beispielsweise source={require('image!Villagers')} die Bilddateien benötigt, die genau als Villagers.png, [email protected] und [email protected] bezeichnet werden. Wenn der '@ 3x'-Teil des Dateinamens nicht vorhanden ist, wird das Bild nicht gefunden. 

31
McG

Welche Version von React Native verwenden Sie? Im Zusammenhang mit dem Packager gab es ein Problem, das gelöst wurde.

Wenn dies der Fall ist, können Sie den Dev-Server entweder aktualisieren oder ausführen:

node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

https://github.com/facebook/react-native/issues/282

4
tadeuzagallo

Diese Frage wurde bereits beantwortet, aber wenn Sie React Native unter Android verwenden, kann dasselbe Problem auftreten. Für mich verwendete die Lösung source={{ uri: "google", isStatic: true }} anstelle von source={required('./bg.png')}.

Vergessen Sie nicht, Ihre Bilder im src/main/res/drawable-Ordner hinzuzufügen.

3
Hadrien Beaufils

HINWEIS: Für neue Ressourcen ist der App-Build erforderlich Jedes Mal, wenn Sie eine neue Ressource zu Images.xcassets hinzufügen, müssen Sie Ihre App über XCode erneut erstellen, bevor Sie sie verwenden können. (von React Native docs https://facebook.github.io/react-native/docs/image.html#content ) 

Stellen Sie außerdem sicher, dass der Packager neu gestartet wird. Das hat das Problem für mich gelöst. 

2
user1813705

Sie können die Bilder leicht referenzieren, indem Sie die package.json-Datei in Ihrem Assets-Ordner erstellen.

Projektordnerstruktur

package.json

Und Sie können es mit diesem Code aufrufen.

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>
1
Alex Petre

Für statische Bilder müssen Sie den Pfad wie folgt angeben: 

<Image source={require('./images/back.png')}  
style= {{width:25, height:25, marginLeft:12, padding:12}}/>

Dies funktionierte für mich, für das Bild, das im Bilderordner des Projektverzeichnisses gespeichert ist:

0
Анураг Пракаш