Question

我在react-native属性中使用typescript在borderStyle中遇到类型错误。 borderStyle属性在react-natives的声明文件（index.d.ts）中声明为联合类型。过去，我只是使用字符串在样式定义中设置值，但是现在我在打字稿中遇到错误。

问题：：如何以不违反打字稿规则的正确方式处理borderStyle的style属性？

导致错误的我的borderStyle属性：

style: {
    borderStyle: 'solid',
},

borderStyle键入为：

borderStyle?: "solid" | "dotted" | "dashed";

使用我的样式生成的错误消息：

Type 'string' is not assignable to type '"solid" | "dotted" | "dashed" | undefined'

更新1：如何详细声明样式

我有一个common.styles.ts文件，这些文件的样式相同（这会导致错误）

import { StyleSheet } from 'react-native';
import theme from './theme.styles';

export default {
    borders: {
        normal: {
            borderColor: '#E8E8E8',
            borderStyle: 'solid',
        },
        light: {
            borderColor: '#F1F1F1',
            borderStyle: 'solid',
        },
    },
};

我使用传播运算符在样式声明文件（Component.styles.ts）中使用以下常见样式：

import { StyleSheet } from 'react-native';
import common from './../../../styles/common.styles';

export default StyleSheet.create({
    container: {
        ...common.borders.normal,
        borderBottomWidth: 1,
    },
});

Answer 1

这是打字稿中的referential integrity issue。在此块中：

style: {  borderStyle: 'solid'}

borderStyle的类型是字符串，其类型比"solid" | "dotted" | "dashed"宽。

尝试

style: {  borderStyle: <"solid" | "dotted" | "dashed">'solid'}

将字符串实体转换为正确的类型。

Answer 2

尝试执行以下操作：<View style={{ borderStyle: 'solid' }}/> 我在此代码中没有收到任何错误，我认为可能是由于导入样式的原因而引起的... 这3种方式的样式不会出现任何错误：

直接在视图中创建样式，如第一行
从某个地方（可能是道具...）获取值，并将其设置为视图样式的直接键，您不能在styleSheet中做到这一点
创建这样的const样式对象：

import { StyleSheet } from 'react-native';

然后

const mstyle = StyleSheet.create({
      boredr: {
                 borderStyle: 'solid'
              }
})

并这样称呼它：

<View style={mstyle.border}/>

为什么字符串与此联合类型冲突？

更新1：如何详细声明样式

2 个答案: