通过 Typescript 使用 React Native StyleSheet 中的函数

Question

很多时候我想做一些类似的事情

const styles = StyleSheet.create({
  square: (size: number) => ({
    width: size,
    height: size,
  }),
})

现在这不起作用，因为我得到了Type '(size: number) => { width: number; height: number; }' is not assignable to type 'ViewStyle | TextStyle | ImageStyle'。我尝试过做类似的事情

interface Style {
  square: (width: number) => ViewStyle
}

const styles = StyleSheet.create<Style>({
  square: (size: number) => ({
    width: size,
    height: size,
  }),
})

但后来我明白了Type 'Style' does not satisfy the constraint 'NamedStyles<any> | NamedStyles<Style>'.

有什么想法如何处理这个问题吗？

Answer 1

我认为 StyleSheet 不支持在其键中包含函数。它的作用类似于网络上的样式表。我怀疑你之前所做的事情不受支持，但现在你使用 TypeScript，它强制执行这一点。

https://facebook.github.io/react-native/docs/stylesheet.html