Блог

Поэтому я использую бумагу React-Native и пытаюсь выровнять карту по вертикали.Заголовок с карточкой.Содержание. Как вы можете видеть, левый край содержимого карты находится немного дальше, чем край карты.Название. Я попытался отрегулировать обивку обоих, но, похоже, это не сработало.

 import React, {useState} from 'react';
import {
  FlatList,
  StyleSheet,
  SafeAreaView,
} from 'react-native';
import Loader from '../components/Loader';
import {Avatar, Button, Card, Title, Paragraph} from 'react-native-paper';

const PostsScreen = ({navigation}) => {
  const [loading, setLoading] = useState(false);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        style={styles.flatlist}
        data={[
          {
            goal: 'Lose 20 lbs',
            body: 'Some stuff',
            icon: 'https://www.google.com/url?sa=iamp;url=https://www.flaticon.com/free-icon/avatar_194938amp;psig=AOvVaw3_3HQARQJzjX8MBiBqsmxMamp;ust=1627701465958000amp;source=imagesamp;cd=vfeamp;ved=0CAsQjRxqFwoTCJCz6c_qifICFQAAAAAdAAAAABAD',
            cover: 'https://picsum.photos/700',
          },
        ]}
        renderItem={({item}) => (
          <Card style={styles.card} mode="outlined">
            <Card.Title
              left={props => <Avatar.Icon {...props} icon={item.icon} />}
            />
            <Card.Content>
              <Title>Goal: {item.goal}</Title>
              <Paragraph>{item.body}</Paragraph>
            </Card.Content>
            <Card.Cover source={{uri: item.content}} />
            <Card.Actions>
              <Button>Cancel</Button>
              <Button>Ok</Button>
            </Card.Actions>
          </Card>
        )}
      />
    </SafeAreaView>
  );
};

export default PostsScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  flatlist: {
    padding: "2.5%",
  },
  card: {
    backgroundColor: 'white',
    padding: '4%',
    borderRadius: 10,
    justifyContent: 'center',
  },
});