Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

536
Visualizações
Trouble requiring image module in React Native

Just getting started with React-Native and I'm having some trouble requiring a static image.

Here's the very-basic code I have so far:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var buzz = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={require('image!bg')}  style={styles.bg}>
          <Text style={styles.welcome}>
            Welcome to Buzz! iOS interface to
          </Text>
          <Text style={styles.welcomeHeader}>Charityware</Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  welcomeHeader: {
    fontWeight: '600',
    fontFamily: 'Helvetica',
    color: '#fff',
    fontSize: 50,
    alignSelf: 'center'
  },
  bg: {
    width: 400,
    height: 300,
    alignSelf: 'auto',

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
  },
});

AppRegistry.registerComponent('buzz', () => buzz);

The main trouble area is:

    <Image source={require('image!bg')}  style={styles.bg}>
      <Text style={styles.welcome}>
        Welcome to Buzz! iOS interface to
      </Text>
      <Text style={styles.welcomeHeader}>Charityware</Text>
    </Image>

When packaging my app and running it, I get a render error: error image

I understand that you need to add images in xcode as an image set in order for the require call to find the image and have added an image set to that end: bg image

...But to no avail. Anyone have any thoughts? I've read the docs and seem to be doing this in the prescribed way. Thanks!

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

Since React Native release 0.14 the handling of images has been normalized for iOS and Android and is now different. I could not find any documentation except for this very clear commit note on Github: Document new asset system.

There's only a screenshot of the proposed documentation: enter image description here

Update: There is a link now for the real documentation: https://facebook.github.io/react-native/docs/images.html

over 4 years ago · Santiago Trujillo Relatório

0

I had similar problem, then renamed the image files in file system under the xcode project's Images.xcassets directories with suffixes and capitalization to match the image I'm loading.

For example, if source={require('image!Villagers')} it required the image files named precisely as Villagers.png, Villagers@2x.png and Villagers@3x.png. If the '@3x' part of filename wasn't there, the image would not get found.

over 4 years ago · Santiago Trujillo Relatório

0

What version of React Native are you running? There was an issue with the packager, related to that, that have been solved.

If that's the case, you can either update or run the dev server with:

node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

https://github.com/facebook/react-native/issues/282

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda