Acabo de empezar con React-Native y tengo algunos problemas para requerir una imagen estática.

Aquí está el código muy básico que tengo hasta ahora:

 '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);

El área principal del problema es:

 <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>

Al empaquetar mi aplicación y ejecutarla, aparece un error de procesamiento:

Entiendo que necesita agregar imágenes en xcode como un conjunto de imágenes para que la llamada require encuentre la imagen y haya agregado un conjunto de imágenes para ese fin:

...Pero fue en vano. ¿Alguien tiene alguna idea? He leído los documentos y parece que estoy haciendo esto de la manera prescrita. ¡Gracias!