Как сделать так, чтобы экраны вписывались в устройство по-родному

Question

Я хочу сделать приложение отзывчивым. Как это сделать в реагировать на родной? Нужно ли писать адаптивный код на каждом экране? Ниже приведен скриншот при тестировании на эмуляторе. https://i.stack.imgur.com/YndQ2.png

Также, когда я взял билд на Хонор, я получил следующее. https://i.stack.imgur.com/dGkzV.png Я хочу именно то, что я получил в эмуляторе. Помогите, пожалуйста, как мне написать код, чтобы сделать его отзывчивым?

Ниже приведен код для этого экрана

import React,{Component} from 'react';
import {Text, View, AsyncStorage, TouchableOpacity, StyleSheet, Image} from 'react-native';
import { SuperGridSectionList } from 'react-native-super-grid';
import { Router, Scene, Actions, ActionConst } from 'react-native-router-flux';

import Card from '../common/Card';
import CardSect from '../common/CardSect';
import NewworkRequest from './NewworkRequest';



 class HomeScreen extends Component{

  render(){
    return(
<View>
<Image source={require('../imgs/bg_colo.jpg')} style={styles.bgImage}/>
      <View style={styles.mainContainer}>
          <CardSect>
            <TouchableOpacity onPress={() => Actions.newworkRequest()}>
             <Image source={require('../imgs/request.jpg')} style={styles.imageStyle}/>
             <View style={styles.viewStyle}>
              <Text style={styles.textStyle}>New Work Request</Text>
             </View>
            </TouchableOpacity>
          </CardSect>
          <CardSect>
           <TouchableOpacity onPress={() => Actions.workerDetails()}>
           <Image source={require('../imgs/worker.jpg')} style={styles.imageStyle}/>
            <View style={styles.viewStyle}>
            <Text style={styles.textStyle}>Worker</Text>
            </View>
           </TouchableOpacity>
          </CardSect>
          <CardSect>
           <TouchableOpacity onPress={() => Actions.reportingPage()}>
           <Image source={require('../imgs/reports.jpg')} style={styles.imageStyle}/>
           <View style={styles.viewStyle}>
            <Text style={styles.textStyle}> Reports</Text>
            </View>
           </TouchableOpacity>
          </CardSect>
          <CardSect>
           <TouchableOpacity onPress={() => Actions.complaintPage()}>
           <Image source={require('../imgs/request.jpg')} style={styles.imageStyle}/>
           <View style={styles.viewStyle}>
            <Text style={styles.textStyle}> Complaints</Text>
            </View>
           </TouchableOpacity>
          </CardSect>
          <CardSect>
           <TouchableOpacity onPress={() => Actions.userListing()}>
           <Image source={require('../imgs/user1.jpg')} style={styles.imageStyle}/>
           <View style={styles.viewStyle}>
            <Text style={styles.textStyle}> Users</Text>
            </View>
           </TouchableOpacity>
          </CardSect>
     </View>
</View>
    );
  }
}
const styles = StyleSheet.create({
textStyle:{
color:'white',
 fontSize:18,
 fontWeight:'bold'
},
  mainContainer: {
        flex: 1,
        flexWrap: 'wrap',
        flexDirection: 'row',
        marginTop:40,

  },
  imageStyle:{
    width:'100%',
    height:130,
    alignItems:'center',
    justifyContent:'center',
    flexGrow:1
  },
  viewStyle:{
    position: 'absolute',
     justifyContent: 'center',
      alignItems: 'center',
      top: 0,
       left: 0,
        right: 0,
         bottom: 0
  },
  bgImage:{
        flex:1,
      width:"100%",
      resizeMode:'cover',
      position: 'absolute',
  }
});
export default HomeScreen;

Answer 1

Вы должны справиться с этим, используя макет flexbox Пример компоновки с flexbox приведен ниже. Используйте этот атрибут flexbox со своими стилями для создания адаптивного контента

---

<View>
<Image source={require('../imgs/bg_colo.jpg')} style={styles.bgImage}/>
      <View style={styles.mainContainer}>

          <View style={styles.cardSet}>
              <CardSect style={{flex:1}} >
                <TouchableOpacity onPress={() => Actions.newworkRequest()}>
                 <Image source={require('../imgs/request.jpg')} style={styles.imageStyle}/>
                 <View style={styles.viewStyle}>
                  <Text style={styles.textStyle}>New Work Request</Text>
                 </View>
                </TouchableOpacity>
              </CardSect>
              <CardSect style={{flex:1}} >
               <TouchableOpacity onPress={() => Actions.workerDetails()}>
               <Image source={require('../imgs/worker.jpg')} style={styles.imageStyle}/>
                <View style={styles.viewStyle}>
                <Text style={styles.textStyle}>Worker</Text>
                </View>
               </TouchableOpacity>
              </CardSect>
          </View>

          <View style={styles.cardSet}>
             <CardSect style={{flex:1}} >
               <TouchableOpacity onPress={() => Actions.reportingPage()}>
               <Image source={require('../imgs/reports.jpg')} style={styles.imageStyle}/>
               <View style={styles.viewStyle}>
                <Text style={styles.textStyle}> Reports</Text>
                </View>
               </TouchableOpacity>
              </CardSect>
             <CardSect style={{flex:1}} >
               <TouchableOpacity onPress={() => Actions.complaintPage()}>
               <Image source={require('../imgs/request.jpg')} style={styles.imageStyle}/>
               <View style={styles.viewStyle}>
                <Text style={styles.textStyle}> Complaints</Text>
                </View>
               </TouchableOpacity>
              </CardSect>
          </View>

          <View style={styles.cardSet}>
             <CardSect style={{flex:0.5}} >
               <TouchableOpacity onPress={() => Actions.userListing()}>
               <Image source={require('../imgs/user1.jpg')} style={styles.imageStyle}/>
               <View style={styles.viewStyle}>
                <Text style={styles.textStyle}> Users</Text>
                </View>
               </TouchableOpacity>
              </CardSect>
              </View>
         </View>
    </View>

  mainContainer: {
        .....
        flexDirection: 'column',
        .....
  },
  cardSet: {

     flex:1,
     flexDirection:'row'
  }