Aqui estão :
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,Image,Dimensions,TouchableOpacity,TextInput
} from "react-native";
const width = Dimensions.get('screen').width
class Post extends Component {
constructor(props){
super(props);
this.state = {
foto:this.props.foto,
valorComentario:'',
}
}
carregaIcone(likeada){
return likeada ? require('../assets/heart.png') : require('../assets/emptyHeart.png');
}
like(){
const { foto } = this.state;
let novaLista = []
if(!foto.likeada){
novaLista = [
...foto.likers,{login:'meuUsuario'}
]
}else{
novaLista = foto.likers.filter(liker=>{
return liker.login !== 'meuUsuario'
})
}
const fotoAtualizada = {
...foto,
likeada: !foto.likeada,
likers: novaLista
}
this.setState({foto: fotoAtualizada})
}
exibeLikes(likers) {
if(likers.length <= 0)
return;
return (
<Text style={styles.likes}>
{likers.length} {likers.length > 1 ? 'curtidas' : 'curtida'}
</Text>
);
}
exibeLegenda(foto) {
if(foto.comentario === '')
return;
return (
<View style={styles.comentario}>
<Text style={styles.tituloComentario}>{foto.loginUsuario}</Text>
<Text>{foto.comentario}</Text>
</View>
)
}
adicionaComentario(){
if (this.state.valorComentario === '')
return;
const novaLista = [...this.state.foto.comentarios,{
id: this.state.valorComentario,
login: 'meuUsuario',
texto: this.state.valorComentario,
}];
const fotoAtualizada = {
...this.state.foto,
comentarios:novaLista,
}
this.setState({foto:fotoAtualizada, valorComentario:''})
this.inputComentario.clear();
}
render() {
const { foto } = this.state
return (
<View>
<View style={styles.cabecalho}>
<Image source={{uri:this.props.foto.urlPerfil}}
style={styles.fotoPerfil} />
<Text>{this.props.foto.loginUsuario}</Text>
</View>
<Image source={{uri:this.props.foto.urlFoto}}
style={{width: width, height: width}} />
<TouchableOpacity onPress={this.like.bind(this)}>
<View style={styles.rodape}>
<Image style={styles.botaoLike} source={this.carregaIcone(foto.likeada)}/>
</View>
</TouchableOpacity>
{this.exibeLikes(foto.likers)}
{this.exibeLegenda(foto)}
{foto.comentarios.map(comentario =>{
<View style={styles.comentario} key={comentario.id}>
<Text style={styles.tituloComentario}>{comentario.login}</Text>
<Text>{comentario.texto}</Text>
</View>
})}
<View style={styles.novoComentario}>
<TextInput onChangeText={texto=> this.setState({valorComentario:texto})}ref={input => this.inputComentario = input}placeholder="Adicione um comentário" style={styles.input}/>
<TouchableOpacity onPress={this.adicionaComentario.bind(this)}>
<Image style={styles.icone} source={require('../assets/sent.png')}/>
</TouchableOpacity>
</View>
</View>
);
}
}
