Вы также можете импортировать свой интерфейсный модуль в нужное место, и оттуда вы можете передать его как опору, и я думаю, что это будет удобный способ
Ex:
button.props.ts
import { ViewStyle, TextStyle, TouchableOpacityProps } from "react-native"
import { ButtonPresetNames } from "./button.presets"
export interface ButtonProps extends TouchableOpacityProps {
/**
* Text which is looked up via i18n.
*/
tx?: string
/**
* The text to display if not using `tx` or nested components.
*/
text?: string
/**
* An optional style override useful for padding & margin.
*/
style?: ViewStyle | ViewStyle[]
/**
* An optional style override useful for the button text.
*/
textStyle?: TextStyle | TextStyle[]
/**
* One of the different types of text presets.
*/
preset?: ButtonPresetNames
/**
* One of the different types of text presets.
*/
children?: React.ReactNode
}
внутри button.tsx передать его в качестве реквизита
import * as React from "react"
import { TouchableOpacity } from "react-native"
import { Text } from "../text"
import { viewPresets, textPresets } from "./button.presets"
import { ButtonProps } from "./button.props"
import { mergeAll, flatten } from "ramda"
/**
* For your text displaying needs.
*
* This component is a HOC over the built-in React Native one.
*/
export function Button(props: ButtonProps) {
// grab the props
const { preset = "primary", tx, text, style: styleOverride, textStyle: textStyleOverride, children, ...rest } = props
const viewStyle = mergeAll(flatten([viewPresets[preset] || viewPresets.primary, styleOverride]))
const textStyle = mergeAll(flatten([textPresets[preset] || textPresets.primary, textStyleOverride]))
const content = children || <Text tx={tx} text={text} style={textStyle} />
return (
<TouchableOpacity style={viewStyle} {...rest}>
{content}
</TouchableOpacity>
)
}
А внутри index.ts просто экспортируйте button.tsx
export * from "./button"