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

Question

我需要为UI layout butto n设置marginRight和left。如果我正确设置了MarginLeft，它对所有设备都没有响应。我需要在一个样式中为所有设备设置动态。

请明确说明如何为ios和android设备编写可响应所有设备的CSS

Answer 1

创建一个名为config.js的文件，并添加以下代码。

从'react-native'导入{尺寸};

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

export default config

然后将该.js文件导入要进行样式设置的文件。

从'./config'导入配置

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

这将根据设备的宽度对齐标签。因此，这将响应每台设备。

像这样，您可以使用paddingRight：config.deviceWidth * 0.2从右对齐。

通过更改 x 的值（deviceWidth * x ），可以根据需要设置边距。