React Native - react-hook-form 和 typescript 用法

Question

我想在 react-hook-form 库的 typescript 中编写一个通用的 Input 组件。

type InputTextProps = {
    name: any,
    control: any
}

const InputText: FC<InputTextProps> = ({name, control, ...props}) => {
    const {field} = useController({
        name,
        defaultValue: '',
        control
    })
    return (
        <TextInput 
            value={field.value}
            onChangeText={field.onChange}
            {...props}
        />
    )
}

在上面的代码中，我应该在 InputTextProps 中使用什么？我也想扩展 TextInput 的 Props。

PS: 在react native中使用typescript方便吗？我发现有很多东西要写，尤其是反应导航等...

Answer 1

据我了解，您想在 InputTextProps.

中使用名称和控件的其他道具的确切类型

为此，您可以使用UseControllerProps，它包括名称和控件属性:

import { UseControllerProps, useController } from "react-hook-form";

type InputTextProps = {
  // other custom props 
} & UseControllerProps;

UseControllerProps 在 controller.d.ts

export declare type UseControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
    name: TName;
    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
    shouldUnregister?: boolean;
    defaultValue?: UnpackNestedValue<FieldPathValue<TFieldValues, TName>>;
    control?: Control<TFieldValues>;
};

React Native - react-hook-form 和 typescript 用法

React Native - react-hook-form and typescript usage

typescript

react-native

react-hook-form