如何使本机应用程序看起来像其他Android应用程序？

Question

我已经使用native base UI工具包在React Native中完成了一个页面应用程序。该页面包含3行3列的网格视图。当我在模拟器中进行构建时，网格视图适合屏幕宽度。但是在采用Moto-G3和Redmi Note5-pro之后。我得到以下屏幕。问题是最后一行需要滚动。因此，该网格不适用于Moto-G3。以下是屏幕截图，请看一下。

1。 Moto-G3

2。 Redmi Note5-pro

我尝试避免使用Content，并使用View并将其放入模拟器https://i.stack.imgur.com/MPkce.png

以下是我一行的代码，请看一下。

<Container>
 <Content style={{padding:20,paddingLeft:8,flex:1,marginBottom:30}}>
 <Grid> 
<Row style={{marginTop:10,flex:1,marginLeft:8}}>
 <Col style={styl.col}> 
<TouchableOpacity onPress ={() => console.log("hii")}>
 <Col style={styl.col2}> 
<Image source={require('../../imgs/inquiry.png')} style={styl.image} />
 </Col>
 </TouchableOpacity> 
<Text style={styl.text}>Inquiry</Text>
 </Col>
 <Col style={styl.col}> 
<TouchableOpacity onPress ={() => console.log("hii")}> 
<Col style={styl.col2}> 
<Image source={require('../../imgs/passport.png')} style={styl.image} />
 </Col> 
</TouchableOpacity>
 <Text style={styl.text}>Visa Status Inquiry</Text> 
</Col> 
<Col style={styl.col}> 
<TouchableOpacity onPress ={() => console.log("hii")}>
 <Col style={styl.col2}> 
<Image source={require('../../imgs/document.png')} style={styl.image} />
 </Col> 
</TouchableOpacity>
 <Text style={styl.text}>Service Procedures</Text> 
</Col>
 </Row>
</Grid>
</Content>

const styl = StyleSheet.create({
  col:{
    flex:1,
     margin:10,
     marginBottom:30
   },
   col2:{
     padding:20,
     backgroundColor:"#000080",
      borderRadius:20,
      flex:1,
      elevation:10
    }, text:{
     fontSize:15,
     marginTop:10,
     textAlign:'center'
   },
   image:{
     width:40,
     height:40,
      alignSelf:'center'
    })}

我应该怎么做才能使其具有响应能力？它肯定可以响应，但是问题出在滚动上。

Answer 1

问题是您正在为所有图像，边距等定义恒定大小...

您应该使用某种乘法器来修改此数字，具体取决于图像大小或使用百分比（但是百分比方式可能会出现严重错误，具体取决于设备屏幕，因此我使用乘法器方式）

您可以使用react-native-size-matters软件包来实现此目的。例如：

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

const Component = props =>
    <View style={{
        width: scale(30),
        height: verticalScale(50),
        padding: moderateScale(5)
    }}/>;

只需阅读我在链接中提供的文档即可。一切都有。

我认为您只需要在40方法中包装数字scale并调整大小即可。