React Native – Image Exigir módulo usando nomes dynamics

Atualmente estou construindo um aplicativo de teste usando o Reagir Nativo. O módulo de imagem, até agora, tem funcionado bem.

Por exemplo, se eu tivesse uma imagem chamada avatar , o trecho de código abaixo funciona bem.

  

Mas se eu mudar para uma string dinâmica, eu fico

  

Eu recebo o erro:

 Exigindo o módulo desconhecido "imagem! Avatar".  Se você tiver certeza de que o módulo está lá, tente reiniciar o empacotador.

Obviamente, este é um exemplo artificial, mas os nomes dynamics das imagens são importantes. O React Native não suporta nomes de imagens dinâmicas?

Reagir erro nativo com o nome da imagem dinâmica

Isto é coberto na documentação sob a seção ” Recursos estáticos “:

A única maneira permitida de se referir a uma imagem no pacote é escrever literalmente require (‘imagem! Nome-do-ativo’) na origem.

 // GOOD  // BAD var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';  // GOOD var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');  

No entanto, você também precisa se lembrar de adicionar suas imagens a um pacote xcassets no seu aplicativo no Xcode, embora pareça que você já tenha feito esse comentário.

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets

Isso funcionou para mim:

Fiz um componente de imagem personalizado que recebe um booleano para verificar se a imagem é da web ou está sendo passada de uma pasta local.

 // In index.ios.js after importing the component  // In CustomImage.js which is my image component  

Se você vir o código, em vez de usar um destes:

 // NOTE: Neither of these will work source={require('../images/'+imageName)} var imageName = require('../images/'+imageName) 

Em vez disso, estou apenas enviando o require('./images/logo.png') inteiro require('./images/logo.png') como um prop. Funciona!

RELEVANTE SE VOCÊ TEM IMAGENS CONHECIDAS (URLS):

A maneira que eu abri caminho através deste problema:

Eu criei um arquivo com um object que armazenou a imagem e o nome da imagem:

 const images = { dog: { imgName: 'Dog', uri: require('path/to/local/image') }, cat: { imgName: 'Cat on a Boat', uri: require('path/to/local/image') } } export { images }; 

Então eu importei o object para o componente onde eu quero usá-lo e apenas faço minha renderização condicional da seguinte forma:

 import { images } from 'relative/path'; if (cond === 'cat') { let imgSource = images.cat.uri; }  

Eu sei que não é a maneira mais eficiente, mas é definitivamente uma solução alternativa.

Espero que ajude!

Eu sei que isso é antigo, mas vou acrescentar isso aqui, já que encontrei essa pergunta, enquanto procurava uma solução. Os documentos permitem um uri: ‘Network Image’

https://facebook.github.io/react-native/docs/images#network-images

Para mim eu tenho imagens trabalhando dinamicamente com isso

  

Você deve usar um object para isso.

Por exemplo, digamos que fiz uma solicitação AJAX para uma API e ela retorna um link de imagem que salvarei para declarar como imageLink :

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