1
In the database I save the image path along with the other posting information, ai on the page I want the image to appear I use a flatlist listing the posts and showing your image if that post has:
Flatlist showing the posts you have in the database
<FlatList
data={postList}
keyExtractor={item => item.id.toString()}
renderItem={({item}) => {
return(
<View style={styles.postagemRed}>
<View style={styles.postCima}>
<Text style={styles.iconPost}></Text>
<View style={styles.separador}>
<View style={styles.nomeDate}>
<Text style={styles.postText}>{item.nome}</Text>
<Text style={[styles.postText, styles.dateText]}>
{ // tratamento da variável de data
item.data.substring(8,10)+'/'+ // dia
item.data.substring(5,7) +'/'+ // mes
item.data.substring(0,4) // ano
}
</Text>
</View>
<View>
<Text style={[styles.postText, styles.cargoText]} >{item.identificacao}</Text>
</View>
</View>
</View>
{item.nomeImage &&
//por algum motivo a imagem não aparece
<Image style={styles.imagePost} source={{uri : item.path}} />
}
<TouchableHighlight style={styles.postBaixo}
underlayColor='#FFFFFF00'
onPress={() => navigation.navigate('OpenPost', {idPost : item.id })}>
<View>
<Text numberOfLines={2} ellipsizeMode={'tail'} style={styles.tituloText}>{item.titulo}</Text>
<Text style={[styles.tituloText, styles.temaTexto]} >{item.tema}</Text>
<View style={styles.corpoPost}>
<Text numberOfLines={3} ellipsizeMode={'tail'} style={styles.postTexto}>
{item.texto}
</Text>
</View>
</View>
</TouchableHighlight>
</View>
);
}}
/>
Part inside the flatlist that makes the comparison if the post has image and should show the image (but only the space of the image appears on the page with nothing)
{item.nomeImage &&
<Image style={styles.imagePost} source={{uri : item.path}} />
}
if I give a console log in this "item.path" it returns the right image path and if I use a
{item.nomeImage &&
<Image style={styles.imagePost} source={require("caminho que ta na variavel 'item.path'")} />
}
it shows the image
example of the value of the.path item:
../../img/postagemPhoto/postagemPicture1628191387071.jpg
Obs: how do I resize the original image to the size of this image tag, so this only shows the central part of the image.