时间戳

首页 > 解决方案 > 如何在响应所有设备的 react-native 应用程序中设置 marginLeft 和 marginRight

ios - 如何在响应所有设备的 react-native 应用程序中设置 marginLeft 和 marginRight

问题描述

我需要为UI layout button 设置 marginRight 和 left。如果我设置MarginLeft和正确，它不会对所有设备都有响应。我需要在单一样式中为所有设备设置动态。

请澄清如何为ios和android设备编写 css 以响应所有设备

标签： ioscssreactjsreact-nativestylesheet

解决方案

Create a file called config.js and add the below code.

import { Dimensions } from 'react-native';

const config = {
    deviceWidth: Dimensions.get('window').width,
    deviceHeight: Dimensions.get('window').height
}

export default config

Then import this .js file to the file where you are going to styling.

import config from './config'

const styles = StyleSheet.create({
    container: {,
       paddingLeft: config.deviceWidth * 0.1,
       width : config.deviceWidth * 0.8
    }
});

This will align your label according to your device width. So this will responsive to every device.

Like this you can use paddingRight: config.deviceWidth * 0.2 to align from right.

By changing the value of x (deviceWidth * x) you can set margin as you want.

推荐阅读