Question

我正在尝试为React Native组件“react-native-tabs”创建一个Typescript定义，我在Text元素上遇到以下错误：

属性'name'在类型'IntrinsicAttributes＆amp; IntrinsicClassAttributes

有没有人知道如何修改我的ts定义，所以我可以告诉编译器当一个子项为Tabs时，'name'是Text的字符串属性？

我的JSX看起来像：

<Tabs selected={this.state.page} style={{backgroundColor:'white'}}
                  selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
                <Text name="first">First</Text>
                <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
                <Text name="third">Third</Text>
                <Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
                <Text name="fifth">Fifth</Text>
</Tabs>

我的Typescript定义如下：

declare module "react-native-tabs" {
    import React, { Component } from "react";

    interface TabProps {
        style?: React.ViewStyle;
        selectedStyle?: {};
        onSelect?: (el:any) => void;
        selected?: string
    }


    export default class Tabs extends Component<TabProps, any> {
        constructor(props: TabProps);
    }

}

谢谢： - ）

Answer 1

您可以通过重新声明来扩展typescript模块 - 例如，您可以重新声明react-native以将项添加到react本机命名空间。您还可以通过以相同方式重新声明类型/接口来扩展它们。一种可能性是简单地将以下内容添加到您已定义标签键入的同一文件中：

declare module "react-native" {
    export interface TextProperties {
        name?: string;
    }
}

通过查看typings located here的源代码，看起来这是正确的位置 - 请注意，这将影响全局的文本组件，而不仅仅是嵌套的文本组件。

另请注意，这是react-native本身扩展react命名空间的方式，您可以在上一段中链接的文件顶部看到描述此内容的注释。

如何为React Native嵌套组件创建Typescript定义

1 个答案: