React Native报错：Text strings需在<Text>组件内渲染问题排查

你写的{console.log('error', error)}直接嵌在了JSX的组件树里，这会让React Native尝试渲染这个表达式的返回值（undefined）。虽然undefined本身不会显示，但React Native会把它当作文本节点处理，而所有文本内容必须被<Text>组件包裹，所以触发了这个错误——你的日志代码不小心变成了要渲染的内容的一部分，这才和Text组件扯上了关系。

有两种简单的修复方式，按需选择：

方式1：把日志移到组件内部的监听逻辑中 #

如果想在error变化时自动打印，用useEffect监听error的变化即可，完全脱离JSX渲染流程：

import React, { useEffect } from "react";
// ... 保留其他导入代码

const RegisterComponents = ({ onChange, onSubmit, form, errors, loading, error }) => {
    const { navigate } = useNavigation();

    // 监听error变化，自动打印日志
    useEffect(() => {
        console.log('error', error);
    }, [error]); // 只有error改变时才执行打印

    return (
        // ... 保留原JSX内容，删掉那行{console.log(...)}
    );
};

方式2：把日志放到提交按钮的点击逻辑里 #

因为你的需求是点击提交按钮时打印错误，直接把日志写在按钮的点击回调里更贴合需求：

// 修改CustomButton的onPress属性
<CustomButton
    loading={loading}
    onPress={() => {
        console.log('error', error);
        onSubmit();
    }}
    disabled={loading}
    primary title="Submit" />

最后一定要删除JSX中那行{console.log('error', error)};，彻底移除这个引发错误的代码。

内容的提问来源于stack exchange，提问作者Faiz Khan