Блог

Почему я не могу разделить последние два компонента?

Сначала я попытался установить justifyContent , но это не сработало. Затем я попытался установить margin . Он работает для заголовка и изображения, но не для компонентов после Image

Я думаю, это потому, что я устанавливаю высоту изображения, но без этого изображение не появится

 import React, {useState, useEffect} from 'react'; import {View, Text, Image, StyleSheet} from 'react-native';   const Card = ({ evento }) =gt; {  return (  lt;View style={styles.card_container}gt;  lt;Text style={styles.titulo}gt;  {evento.titulo} - R$ {evento.valor}  lt;/Textgt;  lt;Image  style={styles.img}  source={{uri: 'https://via.placeholder.com/150'}}  /gt;  lt;Text styles={styles.descricao}gt;{evento.descricao}lt;/Textgt;  lt;Text styles={styles.guia}gt;Organizador: {evento.guia}lt;/Textgt;  lt;/Viewgt;  ); };  const styles = StyleSheet.create({  card_container: {  // flex: 1,  // display: 'flex',  // flexDirection: 'column',  // justifyContent: 'space-between',  fontFamily: 'Rubik-Light',  margin: 3,  marginBottom: 15,  padding: 10,  borderRadius: 10,  backgroundColor: '#ffffff',  elevation: 1,  },  titulo: {  fontFamily: 'Rubik-Medium',  margin: 10,  },  img: {  //alignSelf: 'center',  width: 350, //TODO tamanho dinâmico  height: 200,  marginBottom: 10, // word  },  descricao: {  marginBottom: 10,  },  guia: {  marginTop: 10  } });  export default Card;  

Это опечатка в Text компоненте. Это должно быть style для опоры в Text компоненте нет styles . Вот правильные коды для последних двух компонентов.

 lt;Text style={styles.descricao}gt;{evento.descricao}lt;/Textgt; lt;Text style={styles.guia}gt;Organizador: {evento.guia}lt;/Textgt;