加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 如何在React Native中的无状态功能组件中扩展本机组

发布时间:2020-12-15 16:19:13 所属栏目:百科 来源:网络整理
导读:为了保持一致的样式,React Native文档建议编写 CustomText /包装原生 Text /的文本组件零件. 虽然这很容易做到,但我无法使用TypeScript 2如何制作 CustomText /拥有来自 Text /的所有道具无需重新声明它们. 这是我的组件: import React from 'react';import
为了保持一致的样式,React Native文档建议编写< CustomText />包装原生< Text />的文本组件零件.

虽然这很容易做到,但我无法使用TypeScript 2如何制作< CustomText />拥有来自< Text />的所有道具无需重新声明它们.

这是我的组件:

import React from 'react';
import { Text } from 'react-native';


interface Props {
    children?: any
}

const CustomText: React.SFC<Props> = (props) => (
    <Text {...props}>
        {props.children}
    </Text>
);

如果我尝试使用< CustomText numberOfLines = {1} />它会导致错误

TS2339: Property 'numberOfLines' does not exist on type 'IntrinsicAttributes & Props'

在react-native.d.ts中,我看到有这个导出:

export interface TextProperties extends React.Props<TextProperties> {

    /**
     * Specifies should fonts scale to respect Text Size accessibility setting on iOS.
     */
    allowFontScaling?: boolean

    /**
     * Line Break mode. Works only with numberOfLines.
     * clip is working only for iOS
     */
    lineBreakMode?: 'head' | 'middle' | 'tail' | 'clip'

    /**
     * Used to truncate the text with an elipsis after computing the text layout,including line wrapping,such that the total number of lines does not exceed this number.
     */
    numberOfLines?: number

    /**
     * Invoked on mount and layout changes with
     *
     * {nativeEvent: { layout: {x,y,width,height}}}.
     */
    onLayout?: ( event: LayoutChangeEvent ) => void

    /**
     * This function is called on press.
     * Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).
     */
    onPress?: () => void

    /**
     * @see https://facebook.github.io/react-native/docs/text.html#style
     */
    style?: TextStyle

    /**
     * Used to locate this view in end-to-end tests.
     */
    testID?: string
}

但我不知道如何扩展它以在我的组件的Props界面中利用它.

解决方法

您只需要使您的Props接口扩展TextProperties:

interface Props extends TextProperties {
    children?: any
}

编辑

您需要先导入它:

import { Text,TextProperties } from 'react-native';

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读