React Native中如何在B样式类中复用A样式属性？报错解决

错误原因 #

你在StyleSheet.create内部直接使用...A是行不通的——此时A只是你正在创建的Styles对象的一个属性，在StyleSheet.create执行完成前，Styles对象还未生成，A并不是一个可访问的独立变量，所以会抛出"Property 'A' doesn't exist"的错误。

正确实现方式 #

方法1：提取公共样式为独立变量 #

把需要复用的样式先定义成单独的变量，再在StyleSheet.create中引用，这样就能轻松实现样式复用：

const baseStyle = {
  width: 100,
  height: 100,
  color: 'red'
};

const Styles = StyleSheet.create({
  A: baseStyle,
  B: {        
    ...baseStyle,
    // 这里可以添加B独有的样式属性，比如：
    // backgroundColor: 'blue'
  }
});

方法2：基于已创建的样式扩展 #

如果已经完成了Styles的创建，想要基于Styles.A扩展出Styles.B，可以使用StyleSheet.flatten方法：

const Styles = StyleSheet.create({
  A: {
    width: 100,
    height: 100,
    color: 'red'
  }
});

// 扩展Styles.A得到Styles.B
Styles.B = StyleSheet.flatten([
  Styles.A,
  {
    // 这里添加B的专属样式
  }
]);

额外提示：组件内合并样式 #

如果只是在某个组件中需要同时应用A和自定义样式，也可以直接在组件的style属性中传入样式数组，无需提前合并成新的样式类：

<View style={[Styles.A, { backgroundColor: 'blue' }]} />

内容的提问来源于stack exchange，提问作者Sagar white orange