React Native 样式表中的循环样式

Question

我想问一下这个想法，循环数组然后将它们组合成 1 个样式表以响应本机。我在 expo 开发中使用 react-native。

问题：

const Spacing = StyleSheet.create({
  marginTop5: {
    marginTop: 5
  },
  marginTop10: {
    marginTop: 10
  }, 
  marginTop15: {
    marginTop: 15
  },  
  marginTop20: {
    marginTop: 20
  },....
})

我们可以看到重复的代码被一次又一次地编写了很多次。 所以我想我需要这样写：

const spacing = ['margin', 'padding'];
const direction = ['Top', 'Bottom', 'Left', 'Right'];
const amounts = [ -100, -75, -50, -40, -30, -25, -20, -15, -10, -5, 0, 5, 10, 15, 20, 25, 30, 40, 50, 75, 100 ];
const amountsPositive = [ 0, 5, 10, 15, 20, 25, 30, 40, 50, 75, 100 ];

// Spacing template
_spacingMap = (space, direct, amount) => {
  return space+direct+amount+' { '+space+direct+': '+amount+' }';
}
const testThis = _spacingMap();

const spacingLoop = spacing.map((space) => {
  direction.map((direct) => {
    amountsPositive.map((amount) => {

      _spacingMap(space, direct, amount);

    });
  });
});

所以它会打印出与上面的间距列表相同的内容，而无需输入太多代码。但是有一个问题，我不知道如何让它在“const Spacing = StyleSheet.create({ ... });”中生成代码（反应原生样式表）。

我可以知道如何使它在样式表中工作吗？有可能吗？

谢谢

Answer 1

是的，这是可能的。看一下StyleSheet.create方法的API，它接受一个对象。因此，您只需要生成对象并将其传递给StyleSheet.create 方法即可。考虑以下代码 sn-ps

首先，从_spacingMap返回一个类似的对象

_spacingMap = (space, direct, amount) => {
  return {[`${space}${direct}${amount}`]: { [`${space}${direct}`]: amount }};
}

然后，遍历所有数组并生成所需的对象，如

使用forEach

const dynamicStyle = {};
spacing.forEach(space => {
  direction.forEach(direction => {
    amountsPositive.forEach(amount => {
      Object.assign(dynamicStyle, _spacingMap(space, direction, amount));
    });
  })
});

现在，dynamicStyle 对象具有所有必需的属性，我们只需将该对象传递给 StyleSheet.create 方法

const Spacing = StyleSheet.create(dynamicStyle);

Spacing 将根据您的需要拥有所有必需的样式。你可以使用Spacing.marginTop100。

注意：我已经在 iOS 模拟器上测试了上面的代码，但没有在 Expo 中测试，但我相信这也适用于 Expo。

希望这会有所帮助！