React Native集成react-hook-form报错：input组件View配置回调为undefined

你直接使用了Web端React的react-hook-form示例代码，完全不兼容React Native环境，和依赖安装没有关系。

• React Native不存在<form>、<input>、<span>这类HTML标签，这些是Web浏览器专属元素，原生移动环境无法识别，这是报错的直接诱因。
• react-hook-form在React Native场景下不能直接使用register绑定组件，需要配合Controller组件对接React Native提供的原生表单组件。

首先确认你已经安装了react-hook-form依赖，之后将App.js替换为如下适配React Native的代码即可：

import React from "react";
import { View, TextInput, Button, Text, Alert } from "react-native";
import { useForm, Controller } from "react-hook-form";

export default function App() {
  const { control, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      example: "test",
      exampleRequired: ""
    }
  });

  const onSubmit = data => Alert.alert("表单提交结果", JSON.stringify(data));

  return (
    <View style={{padding: 30, marginTop: 50}}>
      <Controller
        control={control}
        name="example"
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={{borderWidth: 1, borderColor: '#ccc', padding: 8, marginBottom: 15}}
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
          />
        )}
      />

      <Controller
        control={control}
        name="exampleRequired"
        rules={{ required: true }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={{borderWidth: 1, borderColor: '#ccc', padding: 8, marginBottom: 15}}
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            placeholder="必填字段"
          />
        )}
      />
      {errors.exampleRequired && <Text style={{color: 'red', marginBottom: 15}}>This field is required</Text>}

      <Button title="提交表单" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

修改完成后重新运行项目即可正常使用表单功能，支持字段监听、验证、提交逻辑。

内容的提问来源于stack exchange，提问作者Cedric Hermans