1
resposta

Estou tendo o erro " TypeError: undefined is not an object (evaluating '_this.props.foto')"

Não sei se é por causa da minha versão do react-native seja mais nova

Código App:

/**
App
 */

import React, { Fragment } from 'react';
import {
  Dimensions,
  FlatList,
  StyleSheet,
} from 'react-native';

import Post from './src/component/Post';

const width = Dimensions.get("screen").width;//para pegar o tamanho da tela aqui o width

const App = () => {
  const fotos = [
    {id: 1, usuario: 'rafael'},
    {id: 2, usuario: 'alberto'},
    {id: 3, usuario: 'vitor'}
];

  return (

    <FlatList style={styles.container}
    keyExtractor={item => item.id}
    data={fotos}
    renderItem={ ({item}) =>
        <Post foto={item}/>
    }
/>

  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 20
  },
  cabecalho: {
    margin: 10,
    flexDirection: 'row',
    alignItems: 'center'
  },
  fotoDePerfil: {
    marginRight: 10,
    borderRadius: 20,
    width: 40,
    height: 40
  },
  fotoDoPost: {
    width: width,
    height: width
  }


});

export default App;

Código Post:

/**
Post
 */

import React, { Fragment } from 'react';
import {
    View,
    Text,
    Image,
    Dimensions,
    StyleSheet,
} from 'react-native';

const width = Dimensions.get("screen").width;//para pegar o tamanho da tela aqui o width

const App = () => {



    return (

        <View>
            <View style={styles.cabecalho}>
                <Image source={require('../../resources/img/alfinete.png')}
                    style={styles.fotoDePerfil} />
                <Text>{this.props.foto.usuario}</Text>
            </View>
            <Image source={require('../../resources/img/alfinete.png')}
                style={styles.fotoDoPost} />
        </View>
    );
};

const styles = StyleSheet.create({
    cabecalho: {
        margin: 10,
        flexDirection: 'row',
        alignItems: 'center'
    },
    fotoDePerfil: {
        marginRight: 10,
        borderRadius: 20,
        width: 40,
        height: 40
    },
    fotoDoPost: {
        width: width,
        height: width
    }


});

export default App;

Tirei prints do que está retornando: você pode acessá-los por esse link do google drive: https://drive.google.com/open?id=1P7rGVgJBkRhLBf7Tc8_rj7bPLTRwtm1I

1 resposta

Guilherme, boa tarde!

No código do post altere o nome da constante para Post ficando assim:

const Post = () => {
return(
<View>
            <View style={styles.cabecalho}>
                <Image source={require('../../resources/img/alfinete.png')}
                    style={styles.fotoDePerfil} />
                <Text>{this.props.foto.usuario}</Text>
            </View>
            <Image source={require('../../resources/img/alfinete.png')}
                style={styles.fotoDoPost} />
        </View>
)
}

Depois receba as props nesse componente colocando como parâmetro da função

const Post = (props) => {
return(
<View>
            <View style={styles.cabecalho}>
                <Image source={require('../../resources/img/alfinete.png')}
                    style={styles.fotoDePerfil} />
                <Text>{props.foto.usuario}</Text>
            </View>
            <Image source={require('../../resources/img/alfinete.png')}
                style={styles.fotoDoPost} />
        </View>
)
}

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software