React Native TypeScript Bilder og statiske ressurser

Jeg fulgte med på veiledningen som Microsoft har publisert om hvordan man konverterer prosjektet sitt i ReactNative til TypeScript.

Alt fungerte bra helt til jeg nådde punktet hvor jeg trengte å inkludere bilder i prosjektet mitt. Åpenbart pakker ikke tsc bilder inn i outdir, så spørsmålet mitt er hvordan bruker folk for tiden bilder eller andre statiske ressurser når de bruker ReactNative med TypeScript?

Svar #1

Jeg er ikke sikker på om dette er den beste tilnærmingen, måten jeg løste det på er,

Opprett en fil i rotmappen som inneholder bilder (skal kunne leses av TypeScript) eller i en annen mappe i henhold til mappestrukturen din. Gi den navnet "ditt-navn-her.d.ts" (d.ts skal være filtypen. Den brukes av TypeScript-motoren)

 declare module '*.jpg' {
  import { ImageSourcePropType } from 'react-native';
  const value: ImageSourcePropType;
  export default value;
}

ImageSourcePropType er typen som forventes av source-argumentet i Image

Nå hvor som helst et bilde brukes kan det brukes som

import SampleIcon from '../images/sample-image.jpg';

<Image src={SampleIcon} style={{ width: 100, height: 100 }} />

Svar #2

Alternativ 1 - Flytt bilder-mappen til rotmappen i prosjektet:

Måten jeg endte opp med å løse problemet på var å flytte bildene opp til rotmappen for prosjektet, i stedet for å ha dem i src-katalogen.

Opprett en images-mappe i prosjektets rot

images/
  - sample-image.jpg
src/
  - App.tsx
output/
  - App.js

Referer til bildet ved å bruke relativ sti

const image = require('../images/sample-image.jpg');
...
<Image src={image} style={{ width: 100, height: 100 }} />

Siden formen på utdataene skal samsvare med formen på kildekatalogen, fungerer det helt fint å referere til en toppnivå bildekatalog.

Alternativ 2 - Bruk copyfiles npm-pakken:

Dette alternativet lar deg beholde bilder på linje, men krever et ekstra trinn når du bygger prosjektet på nytt.

Installer copyfiles

npm i -D copyfiles

Legg til følgende i package.json-skriptene

...
"start": "npm run build && node node_modules/react-native/local-cli/cli.js start",
"build": "npx tsc && npm run add-assets",
"add-assets": "copyfiles -u 1 'src/**/!(*.js|*.jsx|*.map|*.ts|*.tsx)' lib/",
...

Kjør nå npm run build eller npm start og vår fine nye pakke copyfiles vil kopiere over alle filer som ikke er kildefiler til ut-katalogen.

MERK: Du må kanskje oppdatere globen etter behov for å ignorere filer som du ikke ønsker å kopiere til utkatalogen.

Relaterte artikler