为了保持一致的样式,React Native docs建议编写一个<CustomText />
文本组件来包装Native <Text />
组件.
虽然这很容易做到,但我无法用TypeScript 2解决如何让<CustomText />
拥有<Text />
中的所有props ,而不必重新声明它们.
以下是我的组件:
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
接口中利用它.