在样式表typescript react native上使用函数

b5lpy0ml 于 2022-11-25 发布在 React

关注(0)|答案(3)|浏览(118)

我尝试在我的StyleSheet文件中使用一些variables。
UI工作正常。但类型错误。
你知道怎么解决吗？
第一个
这是来自类型的错误消息。

Type 'Styles' does not satisfy the constraint 'NamedStyles<any> | NamedStyles<Styles>'.
  Type 'Styles' is not assignable to type 'NamedStyles<Styles>'.
    Types of property 'button' are incompatible.
      Type 'buttonStyle' is not assignable to type 'ViewStyle | TextStyle | ImageStyle

react-native

来源：https://stackoverflow.com/questions/71644471/using-a-function-on-stylesheet-typescript-react-native

3条答案

按热度按时间

7ajki6be1#

export default StyleSheet.create<Styles | any>({
  button: (height: number, width: string, color: string) => ({
    height: height,
    width: width,
    backgroundColor: color,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
  }),
});

添加诸如this之类任何类型，

StyleSheet.create<Styles | any>

赞(0）回复(0）举报 2022-11-25

5t7ly7z52#

我认为StyleSheet不包含函数类型。所以我用这个方法修复了这个错误。
样式文件

import type { ViewStyle } from 'react-native';

const styles = {
  button: (height: number, width: string, color: string): ViewStyle => ({
    height: height,
    width: width,
    backgroundColor: color,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
  }),
};

export default styles;

无需定义样式类型。

赞(0）回复(0）举报 2022-11-25

xj3cbfub3#

您可以在组件外部使用StyleSheet. create（）创建常量样式：

const styles = ((height: number, width: string, color: string)) => StyleSheet.create({
    btn: {
        height: height,
        width: width,
        backgroundColor: color,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
    }
});

然后在组件中这样调用它：

<Button style={styles(height: height, width: width, color: color).btn} />

赞(0）回复(0）举报 2022-11-25

我来回答

在样式表typescript react native上使用函数

3条答案

相关问题

热门标签

最新问答