So verwenden Sie einen ImageBackground in React Native

Hier bei 20spokes habe ich viel Zeit mit dem Schreiben von React Native-Code verbracht, um schnell mobile Apps für unsere Kunden zu entwickeln.
Es war eine großartige Erfahrung und die Arbeit mit React Native hat sich schnell zu meiner bevorzugten Sprache entwickelt.

Eine der Apps, an denen ich am meisten gearbeitet habe, basiert stark auf einem Bildschirm, der ein "Hintergrundbild" verwendet. Glücklicherweise macht React Native das ziemlich trivial und wir können mit so etwas ein gutes Ergebnis erzielen.

Klasse CoolBackgroundImage erweitert Component {
    render () {
      Rückkehr (
       
          
            
              Dies ist ein Beispieltext, der über einem gerendert wird
              Bild! Diese Textkomponente und die obige Ansicht
              Komponente sind beide Kinder der Image-Komponente!
            
          
        
      )
    }
  }

Dies funktionierte eine Weile gut und Frieden wurde von allen Komponenten im ganzen Königreich genossen.

Eines schicksalhaften Tages habe ich jedoch React Native von Version 0.48 auf 0.49 aktualisiert. Dann kam die Ablehnungswarnung:

Die Verwendung von  mit Kindern ist veraltet und wird in naher Zukunft ein Fehler sein. Bitte überdenken Sie das Layout oder verwenden Sie stattdessen .

Ok, vielleicht ist das nicht das Ende der Welt. Lassen Sie uns einfach Google "ImageBackground React Native", richtig?

Falsch. Zum Zeitpunkt des Schreibens dieses Dokuments verweisen die offiziellen React Native-Dokumente anscheinend nicht auf eine ImageBackground-Komponente. Was muss ein Entwickler tun?

Lass es uns einfach beflügeln, sollen wir? Vielleicht so etwas:

{ImageBackground} aus 'react-native' importieren
Klasse CoolBackgroundImage erweitert Component {
  render () {
    Rückkehr (
      
        
            Dieser Text ist ein Kind von ImageBackground,
            Das sollte unser Problem lösen.
          
        
      
    )
  }
}

Okay ... das scheint zu funktionieren. Zumindest schien der Bildschirm nicht kaputt zu sein. Obwohl unsere originale gelbe Warnbox durch eine andere ersetzt wurde!

Warnung: Fehlgeschlagener Requisitentyp: Ungültiger Requisitenstilschlüssel 'resizeMode' für 'View'.

Wie sich herausstellt, benötigt ImageBackground zwei Requisiten, mit denen die Komponente formatiert wird. Der erste ist "Stil", mit dem wir alle vertraut sind.
Der zweite ist „imageStyle“, ein Stil, der nur auf das Bild angewendet wird.

Wenn wir uns den Quellcode für `ImageBackground` von React Natives GitHub ansehen, sehen wir, dass die Render-Funktion ungefähr so ​​aussieht:


  
  {props.children}

Die Komponente besteht eigentlich nur aus einem Bild, das als untergeordnetes Element einer Ansicht gerendert wird. Sie muss alle Dimensionen der Ansicht einnehmen und anschließend alle übergebenen untergeordneten Elemente rendern.

Einfach! Um unseren Code zu korrigieren, können wir unseren Code anpassen, um unsere Stile besser darzustellen:

Klasse CoolBackgroundImage erweitert Component {
  render () {
    
      
         Dies ist ein untergeordnetes Element von ImageBackground! 
      
    
  }
}

Beim erneuten Laden der App sollten wir von der ruhigen, stummgeschalteten Abwesenheit von gelben Warnfeldern begrüßt werden.

Dies bereitete mir eine Weile Probleme, da es nur wenige Ressourcen / Dokumentationen zu diesem Problem gab.
Hoffentlich kann dies jemand anderem helfen, der das gleiche Problem hat.