0
270
ViewsEl tipo de elemento de error de procesamiento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido
Estoy tratando de importar una imagen en react-native, desde la carpeta de assets (contiene todas las imágenes). Sin embargo, las imágenes no se compilan cuando las exporto en el simulador IOS. Creo que es importante agregar que mi archivo de assets (que contiene todas las imágenes) es un archivo de solo lectura. Adjunté una imagen en la parte inferior de cómo se ve la carpeta de activos en mi extremo. Además de esa imagen, también adjunté capturas de pantalla de los dos errores que estoy experimentando con el simulador IOS.
¡Gracias por tu tiempo!
Ahora, para una mayor claridad, aquí está mi código:
import React from 'react'; import { ImageBackround, StyleSheet, View, Image, Text} from 'react-native'; function WelcomeScreen(props){ return( <> <ImageBackround style={styles.background} source={require('./assets/icon.png')} > <View style={styles.logoContainer}> <Image style={styles.logo} source={require('./assets/favicon.png')}/> <Text> Sell what you dont need!</Text> </View> <View style ={styles.registerButton}></View> < View style= {styles.loginButton}></View> </ImageBackround> </> ) } const styles = StyleSheet.create({ background: { flex:1, alignItems: "center" , }, loginButton: { width: "100%", height: 70, backgroundColor: "#4ecdc4", }, logo: { width: 100, height: 100, }, logoContainer: { position: "absolute", top: 70, alignItems:"center", }, registerButton: { width: "100%", height: 70, backgroundColor: "#4ecdc4" }, }); export default WelcomeScreen; Aquí adjunto en orden, la imagen del archivo de assets y los 2 errores que me está dando el simulador Ios:
1 answers
Answer question0
¿Puede intentar crear un archivo dentro de los activos que exporta todas las imágenes y llamarlo desde su pantalla de bienvenida?
cree un archivo index.js dentro de la carpeta de activos como este
export const Images ={ adaptive:require('./adaptive.png'), favicon:require('./favicon.png'), icon:require('./icon.png'), splash:require('./splash.png') }y cambia tu pantalla de bienvenida así
import React from 'react'; import { ImageBackround, StyleSheet, View, Image, Text} from 'react-native'; import {Images} from './assets'; function WelcomeScreen(props){ return( <> <ImageBackround style={styles.background} source={Images.icon} > <View style={styles.logoContainer}> <Image style={styles.logo} source={Images.favicon}/> <Text> Sell what you dont need!</Text> </View> <View style ={styles.registerButton}></View> < View style= {styles.loginButton}></View> </ImageBackround> </> ) } const styles = StyleSheet.create({ background: { flex:1, alignItems: "center" , }, loginButton: { width: "100%", height: 70, backgroundColor: "#4ecdc4", }, logo: { width: 100, height: 100, }, logoContainer: { position: "absolute", top: 70, alignItems:"center", }, registerButton: { width: "100%", height: 70, backgroundColor: "#4ecdc4" }, }); export default WelcomeScreen;