React Native报错：th组件View config getter回调必须为函数求助

渲染错误：组件 th 的View config getter回调必须为函数（实际接收到 undefined），提示需确保组件名称以大写字母开头。

报错本质是React Native项目中错误引入了Web端专属的UI组件库，导致运行时无法识别渲染目标：

• 导入的@material-ui/core系列组件（Table/TableHead/TableCell/TableRow等）是为Web端React设计的，底层会渲染div、th、tr、td这类浏览器DOM标签，React Native没有Web DOM运行环境，无法识别这类标签，找不到对应的原生视图配置，就会抛出上述错误。
• 代码返回的JSX中使用的<div>标签同样是Web专属标签，React Native原生不支持该标签。
• 引入的react-table本身是无UI的逻辑hooks库，本身不负责视图渲染，必须搭配对应运行环境的UI组件才能正常工作，当前搭配Web端MUI组件作为渲染层，自然无法在RN环境运行。

• 移除项目中@material-ui/core相关依赖，禁止在React Native项目中使用任何Web端React组件库、Web DOM标签。
• 选择适配React Native生态的方案实现表格功能：
  • 优先使用RN内置的FlatList、View、Text组件自定义实现表格布局，适配性和稳定性最好
  • 如需使用现成组件，选择RN生态专属的表格库（如react-native-table-component）
  • 如果要继续使用react-table的表格逻辑，需要用RN的View、Text组件替换所有MUI、DOM标签作为渲染层。
• 将代码中所有<div>标签替换为React Native的<View>组件。

import {Text, View, Image, Platform, ScrollView, StyleSheet, ActivityIndicator, FlatList,} from "react-native";
import React, { useEffect, useState } from 'react';


import MaUTable from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableCell from '@material-ui/core/TableCell'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
import { useTable } from 'react-table'

function Table({ columns, data }) {
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    })

    // Render the UI for your table
    return (
        <MaUTable {...getTableProps()}>
            <TableHead>
                {headerGroups.map(headerGroup => (
                    <TableRow {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <TableCell {...column.getHeaderProps()}>
                                <Text>{column.render('Header')}</Text>
                            </TableCell>
                        ))}
                    </TableRow>
                ))}
            </TableHead>
            <TableBody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row)
                    return (
                        <TableRow {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return (
                                    <TableCell {...cell.getCellProps()}>
                                        <Text>{cell.render('Cell')}</Text>
                                    </TableCell>
                                )
                            })}
                        </TableRow>
                    )
                })}
            </TableBody>
        </MaUTable>
    )
}

export function CartScreen  ({route,navigation}) {


    let data;
    if(route.params === undefined){
        data = undefined;
    }else{
        data = route.params.json;
    }


    data = JSON.parse(data);
    console.warn('HEEYYYYYYYYYYYYY' + data);
    const columns = React.useMemo(
        () => [
            {
                Header: 'Produto',
                columns: [
                    {
                        Header: 'Nome do produto',
                        accessor: 'enc.produtoNome',
                    },
                    {
                        Header: 'Preço',
                        accessor: 'enc.produtoPreco',
                    },
                ],
            },
        ],
        []
    )

    return (
        <div>
            <Table columns={columns} data={data.encomenda} />
        </div>
    );
}


const styles = StyleSheet.create({
    // Simple style code here
});

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