Как заставить реагировать родные приложения выглядеть как другие приложения для Android?

Question

Я сделал одностраничное приложение на языке native, используя native base UI kit.Страница состоит из сетки с 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

Проблема в том, что вы определяете постоянный размер для всех ваших изображений, полей и т. Д. *

Вы должны использовать какой-либо множитель для изменения этого числа в зависимости от размера изображения или процентов использования(но процентное соотношение может пойти ужасно неправильно, в зависимости от экрана устройства, поэтому я использую множитель)

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

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 и настроить размеры.