React Native报错：TypeError: undefined is not a function (near '...data.map...')求助

错误原因 #

• Rows组件数据格式不匹配：react-native-table-component的<Rows>组件要求传入的data是二维数组，你给表头部分的<Rows>传了一维数组data.tableHead（即['Incident Report']），组件内部遍历数据时自然报错。
• 组件使用逻辑错误：表头应该用<Row>组件（对应单行）而非<Rows>；另外你想跳转到test页面，但代码里写的是跳转到HomeScreen，目标页面写错了。
• 首页代码语法问题：同一个文件里导出了两个默认组件（test和HomeScreen），这会导致模块导出异常，必须拆分到不同文件。

修正后的代码示例 #

1. 修复HistoryScreen表格逻辑 #

import * as React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Table, Row, Rows} from 'react-native-table-component';
import { useState } from 'react'; // 不要导入react/cjs下的开发版，直接从react导入

const tableData={
    tableHead: ['Incident Report'],
    tableData: [
         ['Incident#1'],
         ['Incident#2'],
    ],
};

const styles=StyleSheet.create({
    container: {flex: 1, padding: 10, justifyContent:'center', backgroundColor:'#fff'},
    head: { height: 44, backgroundColor: 'darkblue' },
    headText: { fontSize: 20, fontWeight: 'bold' , textAlign: 'center', color: 'white' },
    text: { margin: 6, fontSize: 16, fontWeight: 'bold' , textAlign: 'center' },
    row: { height: 40 }
});

export default function HistoryScreen({navigation}){
    const [data, setData] = useState(tableData);

    // 行点击跳转逻辑
    const goToTest = () => {
        navigation.navigate('test');
    };

    return(
        <View style={styles.container}>
            <Table borderStyle={{borderWidth: 4,borderColor: 'teal'}}>
                {/* 表头用Row组件，对应单行数据 */}
                <Row data={data.tableHead} style={styles.head} textStyle={styles.headText}/> 
                {/* 数据行用Rows，绑定点击事件 */}
                <Rows 
                    data={data.tableData} 
                    textStyle={styles.text}
                    style={styles.row}
                    onPress={goToTest}
                />
             </Table>
        </View>
    );
}

2. 拆分首页组件到独立文件 #

• test.js：

import * as React from 'react';
import {View, Text} from 'react-native';

export default function test(){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
              <Text style={{fontSize: 20}}> test </Text>
        </View>
    );
}

• HomeScreen.js：

import * as React from 'react';
import {View, Text} from 'react-native';

export default function HomeScreen( {navigation} ){
    return(
        <View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
            <Text
                onPress={()=> alert('This is the "Home" Screen')}
                style={{fontSize: 20}}> test test</Text>
        </View>
    );
}

3. 确保导航配置正确 #

在根组件中注册所有页面：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HistoryScreen from './HistoryScreen';
import test from './test';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HomeScreen">
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="HistoryScreen" component={HistoryScreen} />
        <Stack.Screen name="test" component={test} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

关键提醒 #

• 严格区分<Row>和<Rows>：<Row>处理单行数据（比如表头），<Rows>处理多行二维数据。
• 不要从react/cjs路径导入React hooks，直接从react导入即可，避免版本兼容问题。
• 一个JS文件只能有一个默认导出，拆分组件保证代码规范。

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