为了保持一致的样式,React Native 文档建议编写 <CustomText />
包装 native 的文本组件 <Text />
组件。
虽然这很容易做到,但我无法使用 TypeScript 2 解决如何制作 <CustomText />
的问题。拥有<Text />
的所有 Prop 无需重新声明它们。
这是我的组件:
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
接口(interface)扩展TextProperties
:
interface Props extends TextProperties {
children?: any
}
编辑
您需要先导入它:
import { Text, TextProperties } from 'react-native';
关于reactjs - 如何在 React Native 的无状态功能组件中扩展 native 组件的 props TypeScript 接口(interface)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40295718/