javascript - 在 React Native 中将卡片标题与图像垂直对齐

Question

所以我一直在使用React-Native 论文，我试图将 Card.Title 与 Card.Content 垂直对齐。如您所见，卡片内容的左边缘比 Card.Title 的边缘稍远。我尝试调整两者的填充，但似乎没有用。

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=i&url=https%3A%2F%2Fwww.flaticon.com%2Ffree-icon%2Favatar_194938&psig=AOvVaw3_3HQARQJzjX8MBiBqsmxM&ust=1627701465958000&source=images&cd=vfe&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',
  },
});

标签： javascriptcssreact-nativejsx