React Native 中样式表中的对象

Question

我想知道是否有类似 .less 中可以用 React Native 中的 StyleSheet 对象对一些对象进行分组的事情。

例如，如果我渲染这样的东西：

<View style={styles.wrapper}>
   <View style={styles.wrapper.left}></View>
   <View style={styles.wrapper.right}></View>
</View>

并且有一个像这样的样式表对象：

const styles = StyleSheet.create({
  wrapper: {
    /* Some properties */,
    left: {
      /* Some properties */,
    },
    right: {
      /* Some properties */,
    },
  }
})

谢谢！

Answer 1

您可以为此目的使用 getter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

您可以将其与 StyleSheet.create 一起使用

let style = {
  wrapper: {
    color: "red",
    position: "absolute",
  },
  
  get left() {
    return {
      ...this.wrapper,
      left: 0,
    };
  },
  
  get right() {
    return {
      ...this.wrapper,
      right: 0,
    };
  },
};

console.log(style.left)

let style2 = {
  wrapper: {
    prop: {
      color: "red",
      position: "absolute",
    },

    get top() {
      return {
        ...this.prop,
        top: 0,
      };
    },
    get bottom() {
      return {
        ...this.prop,
        bottom: 0,
      };
    },
  },
};

console.log(style2.wrapper.bottom);