如何让React Native Paper卡片适配所有屏幕并保持间距一致？

修改后的视图代码 #

<View style={styles.container}>
  <ImageBackground source={require('../../assets/images/gsdl_logo1.png')} imageStyle={{opacity:0.3}} style={styles.image}>
    <Text style={styles.title}>Test</Text>
    <View style={styles.space}></View>

    {/* 横向容器添加padding，控制屏幕边缘间距 */}
    <View style={styles.cardRowContainer}>
      <TouchableRipple
        onPress={() => {}}
        rippleColor="rgba(0, 0, 0, .32)">
        <Card style={styles.card}> 
          <Card.Content style={styles.cardContent}> 
            <Title style={styles.cardContent1}>Test</Title> 
          </Card.Content> 
          <Card.Cover source={{ uri: 'https://gsdl.org.in/images/health&fw.png' }} style={styles.cardImage}/> 
        </Card>
      </TouchableRipple>

      {/* 用容器布局代替固定宽度的space1 */}
      <TouchableRipple
        onPress={() => {}}
        rippleColor="rgba(0, 0, 0, .32)">
        <Card style={styles.card}> 
          <Card.Content style={styles.cardContent}> 
            <Title style={styles.cardContent1}>Test</Title> 
          </Card.Content> 
          <Card.Cover source={{ uri: 'https://gsdl.org.in/images/water.jpeg' }} style={styles.cardImage}/> 
        </Card>
      </TouchableRipple>
    </View>
  </ImageBackground>
</View>

修改后的样式代码 #

import { StyleSheet, Dimensions } from 'react-native';
// 获取屏幕宽度，用于动态计算卡片尺寸
const { width: screenWidth } = Dimensions.get('window');
// 定义全局间距常量，统一控制所有留白
const SCREEN_EDGE_SPACING = 16;
const CARD_BETWEEN_SPACING = 12;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eaeaea',
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: '#20232a',
    borderRadius: 6,
    backgroundColor: '#61dafb',
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
  },
  space: {
    height: 20,
  },
  // 横向卡片容器：控制边缘间距+自动分配卡片间空白
  cardRowContainer: {
    flexDirection: 'row',
    paddingHorizontal: SCREEN_EDGE_SPACING,
    justifyContent: 'space-between',
  },
  card: {
    // 动态计算卡片宽度：屏幕宽度减去左右边距和卡片间距后平分
    width: (screenWidth - SCREEN_EDGE_SPACING * 2 - CARD_BETWEEN_SPACING) / 2,
    // 限制最大宽度，避免大屏上卡片过宽
    maxWidth: 200,
  },
  cardImage: {
    // 图片宽度自适应卡片，高度按比例固定
    width: '100%',
    height: 150,
  },
  cardContent: {
    height: 50,
    padding: 0,
  },
  cardContent1: {
    fontSize: 13,
    fontWeight: 'bold',
  },
  image: {
    flex: 1,
    resizeMode: 'cover',
  }
});

关键修改说明 #

• 动态计算卡片宽度：通过Dimensions获取屏幕宽度，减去边缘间距和卡片间留白后平分，确保在任何屏幕上两个卡片都能均匀分配空间
• 统一间距常量：用全局常量控制所有留白，避免零散的固定值导致的适配混乱
• 移除固定宽度元素：删除了固定宽度的space1，改用容器的justifyContent: 'space-between'自动分配卡片间的空白，适配更灵活
• 图片自适应：卡片图片设置width: '100%'，跟随卡片宽度变化，避免固定宽度导致的溢出或留白
• 简化触摸容器样式：移除了TouchableRipple中干扰布局的flex:1和居中样式，让它完全包裹卡片即可

内容的提问来源于stack exchange，提问作者Souvik Sankar Mitra