[英]How to extend a native's component's props TypeScript interface in a stateless, functional component in React Native?
For consistent styling, the React Native docs recommend writing a <CustomText />
text component that wraps the native <Text />
component. 为了保持一致的样式,React Native文档建议编写一个
<CustomText />
文本组件,该组件包装本机的<Text />
组件。
While this is easy to do, I can't work out with TypeScript 2 how to make <CustomText />
have all of the props from <Text />
without having to redeclare them. 尽管这很容易做到,但是我无法使用TypeScript 2来解决如何使
<CustomText />
具有<Text />
所有道具,而不必重新声明它们。
Here's my component: 这是我的组件:
import React from 'react';
import { Text } from 'react-native';
interface Props {
children?: any
}
const CustomText: React.SFC<Props> = (props) => (
<Text {...props}>
{props.children}
</Text>
);
And if I try to use it with <CustomText numberOfLines={1} />
it will result in an error 如果我尝试将其与
<CustomText numberOfLines={1} />
,则会导致错误
TS2339: Property 'numberOfLines' does not exist on type 'IntrinsicAttributes & Props'
In react-native.d.ts
, I see that there's this export: 在
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
}
but I'm not sure how to extend it to take advantage of it in my component's Props
interface. 但是我不确定如何扩展它以在组件的
Props
界面中利用它。
You just need to make your Props
interface extends TextProperties
: 您只需要使
Props
接口扩展TextProperties
:
interface Props extends TextProperties {
children?: any
}
You need to import it first: 您需要先导入它:
import { Text, TextProperties } from 'react-native';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.