React Native 样式表中的继承

Question

所以在常规级联样式中 sheet 我们可以从其他样式继承：

.myStyle .temp {
   height: 100px,
   width: 80px,
}

我的问题是：

有没有办法让我在 React Native 中做到这一点。我尝试了几种不同的方法，但似乎无法正常工作。我尝试过的一些方法如下：

// Example One
// Error Thrown: tempStyle is not defined.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    ...tempStyle,
  },
  tempStyle :{
    backgroundColor: 'tomato'
  }
});

以下对我也不起作用，它没有抛出任何错误，但根本不起作用。

我将样式设置为 tempStyle，它基本上是一个空白样式 sheet 这确实有意义，因为它可能指向任何内容。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tempStyle :{
    container :{
    backgroundColor: 'tomato'
  }
  }
});

我知道我们可以使用括号在组件中的样式属性中引用多个样式。

<View style={[Styles.temp, Styles.tempTwo]} />

这是完成此任务的唯一方法吗？

Answer 1

你可以使用数组表示法：

<View style={[styles.container, styles.tempStyle]} />

Answer 2

您的第一个想法行不通，因为您正试图将 StyleSheet 的创建函数内定义的样式对象用于同一创建函数内定义的另一个样式对象。您无法在创建函数中访问它们。

但是，您可以在普通 JS 对象中定义样式，然后使用扩展语法来实现几乎相同的事情。

请注意，样式毕竟只是一个 JS 对象。

让我们称这个文件为styles.js。

// helper, keep local
const tempStyle = {
    backgroundColor: 'tomato'
}

// we only want to use this style
// spread syntax works here
export const container = {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    ...tempStyle,
}

export SomeOtherStyle = {
    ...tempStyle,
}

那么，我们就可以照常使用上面的样式了

import { container, SomeOtherStyle } from './styles.js'

...

<View style={[container, someOtherStyle]}></View>

请注意，我们也可以在这里使用打字稿（如果您在项目中使用它）。

// helper, keep local
const tempStyle: ViewStyle = {
    backgroundColor: 'tomato'
}

// we only want to use this style
// spread syntax works here
export const container: ViewStyle = {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    ...tempStyle,
}

export SomeOtherStyle: ViewStyle = {
    ...tempStyle,
}

使用打字稿，您将对样式进行自动完成和类型检查。还要注意，不同类型的组件可能有不同的样式（例如 TextStyle）。

React Native 样式表中的继承

Inheritance In React Native Style Sheets

react-native

react-css-modules