适合所有屏幕宽度的 React Native 纸卡

Question

使用两张 React Native 卡水平对齐。卡片在不同的手机屏幕上的适配方式也不同。第一张图片是 Android 模拟器 Pixel 3a API 34，第二张图片来自物理设备 OnePlus Nord。 我是 React Native 的新手。尝试更改卡片和视图的不同宽度。还尝试了

flexShrink:1

属性。任何使卡片适合任何具有相等空白空间的手机屏幕的样式属性。

这是查看部分：

<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>

<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}>Test</Title> 
        </Card.Content> 
        <Card.Cover source={{ uri: 'https://gsdl.org.in/images/health&fw.png' }} style={styles.cardImage}/> 
       {/* <Card.Content> 
        <Paragraph>A Computer Science portal for Geeks</Paragraph> 
        </Card.Content>  */}
        {/* <Card.Actions> 
          <Button>Visit</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}>Test</Title> 
        </Card.Content> 
        <Card.Cover source={{ uri: 'https://gsdl.org.in/images/water.jpeg' }} style={styles.cardImage}/> 
       {/* <Card.Content> 
        <Paragraph>A Computer Science portal for Geeks</Paragraph> 
        </Card.Content>  */}
        {/* <Card.Actions> 
          <Button>Visit</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, // or whatever size you need
    height: 20,
  },

  space1: {
    width: 20, // or whatever size you need
    // height: 20,
  },

  card :{ 
    display: "flex", flexWrap: "wrap",
    flexShrink:1,
    // alignContent:'center',
    // borderRadius: 100,
    // ssssmarginRight:100,
    width: 180, // or whatever size you need
    // 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', // or 'contain' 
    // opacity: 0.5
    // justifyContent: 'center',
    // alignItems: 'center',
  }
});

如何更改样式以使卡片之间的间隙在所有类型的屏幕上保持相同？

Answer 1

我建议您使用百分比来定义卡片的宽度，因为硬数字通常是 UI 中断的原因，同时尝试在您支持的尽可能小的设备上开发 UI，以便轻松扩展到大型设备。

如果您想为组件提供设备尺寸特定的尺寸，您可以使用以下任何一种：

1. 反应本机响应式屏幕

2. React Native 的 useWindowDimensions 钩子

   const {高度，宽度} = useWindowDimensions();

   卡片：{宽度：宽度/3}，