Sådan bruges en ImageBackground i React Native

Her ved 20 talere har jeg brugt meget tid på at skrive React Native code for hurtigt at udvikle mobile apps til vores klienter.
Det har været en fantastisk oplevelse, og at arbejde med React Native er hurtigt blevet mit yndlingssprog at bruge.

En af de apps, jeg har brugt mest tid på at arbejde på, er stærkt afhængig af en skærm, der bruger et ”baggrundsbillede”. Heldigvis gør React Native dette temmelig trivielt at opnå, og vi kan få et pænt resultat med noget lignende.

klasse CoolBackgroundImage udvider komponent {
    render () {
      Vend tilbage (
       
          
            
              Dette er nogle eksempler på tekst, der vil gengives over en
              billede! Denne tekstkomponent og ovenstående udsigt
              komponent er begge børn af billedkomponenten!
            
          
        
      )
    }
  }

Dette fungerede fint i et stykke tid, og fred blev nydt af alle komponenter i hele riget.

En skæbnesvangert dag opgraderede jeg imidlertid React Native fra version 0.48 til 0.49. Så kom afskrivningsadvarslen:

Brug af  med børn udskrives og det vil være en fejl i den nærmeste fremtid. Overvej venligst layoutet, eller brug  i stedet.

OK, måske er dette ikke verdens ende. Lad os bare være Google ImageBackground React Native, ikke?

Forkert. På dette tidspunkt skriver de officielle React Native-dokumenter tilsyneladende ingen henvisning til en ImageBackground-komponent. Hvad skal en udvikler gøre?

Lad os bare vinge det, skal vi? Måske noget lignende:

import {ImageBackground} fra 'react-native'
klasse CoolBackgroundImage udvider komponent {
  render () {
    Vend tilbage (
      
        
            Denne tekst er et barn af ImageBackground,
            hvilket skulle løse vores problem.
          
        
      
    )
  }
}

Okay ... dette ser ud til at fungere. I det mindste så det ud til, at skærmen ikke var ødelagt. Selvom vores originale gule advarselsboks er erstattet af en anden!

Advarsel: Mislykket proptype: Ugyldig props.style-nøgle 'resizeMode' leveret til 'Vis'.

Som det viser sig, tager ImageBackground to rekvisitter, der bruges til at style komponenten. Den første er "stil", som vi alle er bekendt med.
Den anden er “imageStyle”, som er en stil, der kun anvendes til billedet.

Ved at se på kildekoden til `ImageBackground 'fra React Native's GitHub, kan vi se renderfunktionen komme ud til noget lignende:


  
  {Props.children}

Komponenten koger egentlig bare ned til, at et billede gengives som et barn i en udsigt, får at vide at tage alle synets dimensioner op og derefter gengive alle børn, der sendes til det.

Enkel! For at rette vores kode kan vi justere vores kode, så de bedre repræsenterer vores stilarter:

klasse CoolBackgroundImage udvider komponent {
  render () {
    
      
         Dette er et barn af ImageBackground! 
      
    
  }
}

Når vi genindlæser appen, skal vi blive mødt af det rolige, lydløse fravær af ingen gule advarselsbokse.

Dette gav mig problemer i et stykke tid i betragtning af de plettede ressourcer / dokumentation omkring dette problem.
Forhåbentlig kan dette hjælpe en anden med det samme problem.