Подгонка карточек React Native Paper под любую ширину экрана

Используя две карточки React Native, расположенные горизонтально. Но они показывают разные расстояния на разных экранах телефонов. Я новичок в React Native. Пытался изменить различные ширины для карточек и View. Также пробовал свойство flexShrink:1.

Вот часть с View:

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

<Text style={styles.title}>Тест</Text>
<View style={styles.space}></View>

<View style={{flexDirection:"row"}}>

{/* <View> */}
<TouchableRipple
        style={styles.ripple}
        onPress={() => {}}
        rippleColor="rgba(0, 0, 0, .32)">
<Card style={styles.card}> 
        <Card.Content style={styles.cardContent}> 
            <Title style={styles.cardContent1}>Тест</Title> 
        </Card.Content> 
        <Card.Cover source={{ uri: 'https://gsdl.org.in/images/health&fw.png' }} style={styles.cardImage}/> 
       {/* <Card.Content> 
        <Paragraph>Портал для компьтерных наук для гиков</Paragraph> 
        </Card.Content>  */}
        {/* <Card.Actions> 
          <Button>Посетить</Button> 
        </Card.Actions>  */}
      </Card>

      </TouchableRipple>
  {/* </View> */}

  <View style={styles.space1}></View>

  {/* <View> */}
<TouchableRipple
        style={styles.ripple}
        onPress={() => {}}
        rippleColor="rgba(0, 0, 0, .32)">

      <Card style={styles.card}> 
        <Card.Content style={styles.cardContent}> 
            <Title style={styles.cardContent1}>Тест</Title> 
        </Card.Content> 
        <Card.Cover source={{ uri: 'https://gsdl.org.in/images/water.jpeg' }} style={styles.cardImage}/> 
       {/* <Card.Content> 
        <Paragraph>Портал для компьтерных наук для гиков</Paragraph> 
        </Card.Content>  */}
        {/* <Card.Actions> 
          <Button>Посетить</Button> 
        </Card.Actions>  */}
      </Card>

      </TouchableRipple>
  {/* </View> */}

      </View>

      </ImageBackground>

</View>

Вот часть стилей:

const styles = StyleSheet.create({
  container: {
    flex: 1,

    // padding: 24,
    backgroundColor: '#eaeaea',
    // marginTop: 56,
    // paddingVertical: 85,
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
    // height:1000

  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: '#20232a',
    borderRadius: 6,
    backgroundColor: '#61dafb',
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold',
  },

  space: {
    width: 20, // или любой необходимый размер
    height: 20,
  },

  space1: {
    width: 20, // или любой необходимый размер
    // height: 20,
  },

  card :{ 
    display: "flex", flexWrap: "wrap",
    flexShrink:1,
    // alignContent:'center',
    // borderRadius: 100,
    // ssssmarginRight:100,
    width: 180, // или любой необходимый размер
    // height: 160,
    // width: "90%",
    fontSize: 30,
    fontWeight: 'bold',
    // backgroundColor: '#61dafb',

},
cardImage :{
  height:150,
  width:180
},
cardContent:
{
  height:50,
  padding:0

},
cardContent1:
{

  fontSize: 13,
  fontWeight: 'bold',
},

  ripple: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  image: {
    flex: 1,
    resizeMode: 'cover', // или 'contain' 
    // opacity: 0.5
    // justifyContent: 'center',
    // alignItems: 'center',
  }
});

Как изменить стиль так, чтобы расстояния между карточками оставались одинаковыми для всех типов экранов?

Содержание

Ответ
Измените блок отображения
Измените стили
Объяснение изменений

Ответ

Чтобы решить проблему с одинаковым расстоянием между картами на разных экранах в React Native, вам нужно использовать гибкие стили, которые учитывают размеры экрана. Вместо того чтобы полагаться на фиксированные размеры карт и расстояния, рекомендуется использовать пропорциональные значения (например, процентные значения) и добавлять стиль для равного расстояния между картами. Вот как вы можете это сделать:

Используйте flex и flexGrow для карт: Установите ширину карт в flex или percentage, чтобы они автоматически подстраивались под ширину экрана.
Используйте margin для отступов: Задайте отступы для карт, чтобы расстояние между ними было равномерным.

Вот пример того, как изменить ваш код:

Измените блок отображения

<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 style={styles.cardContainer}>
            <TouchableRipple style={styles.ripple} 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>

            <TouchableRipple style={styles.ripple} 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>

Измените стили

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,
    },
    cardContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between', // Это равномерно распределит пространство между картами
        marginHorizontal: 10, // Отступы по бокам
    },
    card: {
        flex: 1, // Позволяет картам занимать равные части пространства
        margin: 5, // Отступы между картами
        minWidth: 150, // Минимальная ширина карты
    },
    cardImage: {
        height: 150,
        width: '100%', // Полная ширина карты
    },
    cardContent: {
        padding: 0,
    },
    cardContent1: {
        fontSize: 13,
        fontWeight: 'bold',
    },
    ripple: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    image: {
        flex: 1,
        resizeMode: 'cover', 
    },
});

Объяснение изменений

flexDirection: ‘row’: Позволяет картам располагаться в ряд.
justifyContent: ‘space-between’: Сохраняет равные отступы между картами.
flex: 1: Позволяет картам занять равные размеры.
margin: Используется для определения расстояния между картами.

Эти изменения помогут вам добиться одинакового расстояния между картами на различных устройствах, независимо от их экранного размера.