解决方案：react-native IllegalArgumentException("Cannot get layout paddings of multi-edge shorthands")

报错的原因

"IllegalArgumentException("Cannot get layout paddings of multi-edge shorthands")"这个错误通常是由于在使用React Native中的View组件时，在设置padding属性时使用了多边缩写导致的。例如，使用"padding: 10"而不是"paddingTop: 10, paddingRight: 10, paddingBottom: 10, paddingLeft: 10"。这是因为React Native中的View组件不支持多边缩写属性。

解决方法是改用单独的上下左右属性进行设置。

如何解决

解决这个错误的方法是改用单独的上下左右属性进行设置。

例如:

  ...

取代

  ...

或者使用Dimensions API自动获取屏幕边距:

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');


  ...

还有一种方法是把设置的值分别传入对应的属性中，这样就不会报错了。

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: 10,
    paddingRight: 20,
    paddingBottom: 30,
    paddingLeft: 40,
  },
});


  ...

任选一种方法进行修改都可以解决这个错误。

使用例子

当然有,

这是一个在使用绝对定位和边距的例子:

import React from 'react';
import { View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 10,
    right: 20,
    bottom: 30,
    left: 40,
  },
});

const MyComponent = () => {
  return (
    
      {/* content */}
    
  );
};

export default MyComponent;

这是一个使用尺寸相对单位来设置边距的例子:

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    padding: width * 0.1,
  },
});

const MyComponent = () => {
  return (
    
      {/* content */}
    
  );
};

export default MyComponent;

希望这个示例能帮助你解决这个问题。