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方法中。考虑以下代码片段

首先，从_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上使用。

希望这会有所帮助！

React Native样式表中的循环样式

1 个答案: