webentwicklung-frage-antwort-db.com.de

React Native Required (Bild) gibt die Nummer zurück

Ich habe eine js-Datei mit einer EventCard-Komponente, die den Namen, das Datum, das Ereignisbild usw. übernimmt. Wenn das Ereignisbild nicht vorhanden ist, möchte ich ein Platzhalterbild laden. Nun sieht diese Aussage so aus

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : require("../assets/images/image.jpg");
    this.state = {image: imgUrl}
}

Ich verwende this.state in rendern für die Quelle 

source={{uri: this.state.image}}

Ich bekomme seltsamerweise 11, wenn ich das Platzhalterabbild fordern und die Reaktion des nativen Wurfs "UI-Wert für Double" nicht in Double konvertieren kann.

Hilfe wird sehr geschätzt.

Vielen Dank

4
Kireeti K

Sie müssen die Bildquelle direkt zuweisen, wenn Sie erfordern.

constructor(props){
  super(props);
  let imgUrl = props.image ? { uri: props.image } : require("../assets/images/image.jpg");
  this.state = { image: imgUrl };
}

und dann in deinem render:

source={this.state.image}
4
Fawaz

Sie können das einfach tun

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : null
    this.state = {image: imgUrl}
}

source={imgUrl == null ? require("../assets/images/image.jpg") : this.state.image}
1
Haider Ali

Nach einigen Nachforschungen und etwas Hilfe von @Fawaz und @Haider verstand ich, dass eine Zahl zurückgegeben werden muss. Dies bedeutet, dass wir eine Nummer direkt mit source verwenden können, ohne dass es erforderlich ist, und es funktioniert

<Image source={11} />

Dies sollte ein Bild von Ihrer lokalen Ressource anzeigen, wenn Sie ein Bild haben, das dieser Nummer entspricht. Wenn Sie also entscheiden möchten, ob der Server eine gesendete URL oder eine lokale Ressource anzeigen soll, wie in meinem Fall. wir können mit @Fawaz antworten, was im Grunde ein {uri: "image-link"} einfügt, oder requir ("image"), bei dem die Anforderung zu einer Zahl aufgelöst wird, und bei Verwendung mit source entweder das Objekt oder die Nummer angeben die Standardwege gemäß der Dokumentation.

0
Kireeti K
You can try this,

import React, {Component} from 'react';
import {StyleSheet,ImageBackground} from 'react-native';

import bgSrc from './images/bgfrm.png';

export default class Wallpaper extends Component {
  constructor(props){
    super(props);
    let imgUrl = props.image ? props.image :bgSrc;
    this.state = {image: imgUrl};
}

  render() {
    return (
      <ImageBackground style={styles.picture} source={this.state.image}>
        {this.props.children}
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  picture: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover',
  },
});
0
Uthaya

Verwenden Sie die require nicht dynamisch. Ausführliche Erklärung in diesem Beitrag: React Native - Image Require-Modul mit dynamischen Namen

0
gazdagergo