Question

我想使该应用程序具有响应能力。在react native中该怎么做？我是否需要在每个屏幕上编写响应代码？以下是在模拟器上测试时的屏幕截图。 https://i.stack.imgur.com/YndQ2.png

当我在Honor上进行构建时，我得到了以下内容。 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属性与您的样式一起使用，以创建响应式内容

robjects.r('is.na(SD2011[, 27])')
# array([0, 0, 1, ..., 0, 0, 0], dtype=int32)

我如何使屏幕适合本机中的设备

1 个答案: