React Native修改布局后触发组件导入导出类运行时报错

这个提示是React/React Native开发里最高频的渲染类报错，触发本质非常明确：JSX渲染阶段遇到了值为undefined的组件。React在渲染时仅识别两类合法组件：一是字符串形式的内置原生标签（比如RN自带的View、Text），二是函数/类形式编写的复合自定义组件，只要碰到值为undefined的内容就会抛出该提示。

• 逐行梳理JSX中使用的所有组件，在导入完成后直接打印对应组件的取值，快速锁定哪个组件最终拿到的是undefined
• 核对导入写法和组件源的导出方式是否匹配：
  • 若组件是源文件的默认导出（语法为export default 组件名），必须使用import 组件名 from '路径'的默认导入写法，错用带括号的命名导入就会拿到undefined
  • 若组件是源文件的命名导出（语法为export const 组件名 = ...），必须使用import { 组件名 } from '路径'的命名导入写法，错用默认导入就会拿到undefined
• 排查循环导入问题：如果两个模块存在互相引入的关系，模块初始化阶段会出现组件值未完成挂载就被调用的情况，最终取值为undefined，触发同类报错

对照贴出的代码，有三处必然触发报错的问题，逐一修正即可解决：

1. 错误的组件导入来源
   你在react-native的导入列表中引入的Card、Background、Logo、Header、Title、Button、Divider都不属于react-native的内置导出组件。react-native根包的内置UI组件仅包含View、Text、StyleSheet、ScrollView、TextInput等基础组件，上述自定义UI组件根本不存在于该包的导出列表中，导入后值全为undefined，会直接触发渲染报错。
   修复方式：将这些自定义组件从react-native的导入块中移除，按照实际来源补全导入路径——如果是项目内自写组件，就从对应的组件目录引入；如果是第三方UI库提供的组件，就按照官方文档指定的正确路径导入。
2. 状态取值逻辑错误
   你在Title组件中传入的内容{initialtime[2]}不符合实际数据结构：initialtime是useState定义的对象类型，不是数组，这种下标取值方式拿不到有效内容。需要按照对象的key取值，比如替换为{initialtime.recordTime}。
3. 根组件导入路径校验
   检查AppEntry.js中写的导入路径../../src/App是否对应真实存在的文件，确认该文件确实使用默认导出的方式导出App组件，避免路径写错导致App组件本身导入为undefined。

内容的提问来源于stack exchange，提问作者William Pham