0

Tengo un problema y no hay mucha información sobre esto

Quiero hacer esto, crear un componente que cuando le pases tu nombre y una path de un avatar este dispare una contact bar mostrando el nombre y el avatar al lado todo como una caja

archivo: assetObjects.js (Donde están las paths a los avatars)

const avatarPaths = {
  naruto: require('../../assets/avatars/NarutoSmall.png'),
  hinata: require('../../assets/avatars/HinataSmall.png'),
  susuke: require('../../assets/avatars/SasukeSmall.png'),
  sakura: require('../../assets/avatars/SakuraSmall.png'),
  kakashi: require('../../assets/avatars/KakashiSmall.png'),
  tsunade: require('../../assets/avatars/TsunadeSmall.png'),
};

export default avatarPaths;

archivo ContactBar.js (Componente, el problema con los parámetros)

import React from 'react';
import {Alert, Pressable, View, Image, Text} from 'react-native';
import avatarPaths from '../../assets/assetObjects/assetObjects';
//import {avatarPaths} from '../../assets/assetObjects/assetObjects';

//const assets = require('../../assets/assetObjects/assetObjects.js');

const ContactBar = props => {
  return (
    <View>
      <Image style={{height: 2, width: 3}} source={props.path)} />
      <Text>{props.name}</Text>
      <Pressable onPress={() => Alert.alert('unhide')}>
        <Image source={require('../../assets/icons/bx-hide.png')} />
      </Pressable>
    </View>
  );
};

export default ContactBar;

archivo Dashboard.js (Componente de pantalla dashboard que manipula la ContactBar)

import React from 'react';
import {SafeAreaView, View} from 'react-native'; //si no lo hago con View en vez de SafeAreaView, me tirar error de renderizado
import BarTitleButton from '../../components/BarTitleButton/BarTitleButton';
import ScreenHeader from '../../components/ScreenHeader/ScreenHeader'; //Si lo pongo llaves no renderiza
import {primaryBackground, logo2} from '../commonsStyles/Styles';
import {dashboardBox, dashboardBackBox} from './Styles'; //si lo pongo sin llaves no renderiza la box
import avatarPaths from '../../assets/assetObjects/assetObjects';
import {ContactBar} from '../../components/ContactBar/ContactBar';

const Dashboard = () => {
  return (
    <SafeAreaView style={primaryBackground}>
      <ScreenHeader style={logo2} />
      <View style={dashboardBackBox} />
      <View style={dashboardBox}>
        <BarTitleButton title="Contacts" titleBtn="+" />
        <View>
          <ContactBar name="Seba" path={avatarPaths.naruto} />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default Dashboard;

Me tira error de renderizado con el require Si en vez de hacer esto:

<ContactBar name="Seba" path={avatarPaths.naruto} />

hago <Image source={avatarPaths.naruto} /> en la dashboard funciona. Pero no me sirve, porque quiero poder estandarizarlo como un componente nombre+avatar+icon-hide

1 respuesta 1

0

Solucione el problema, y era que no renderizaba por que importe el componente dentro de llaves

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.