如何让 React Native 应用看起来像其他 Android 应用？

Question

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

1.摩托-G3

2。红米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 方法中并调整大小。