如何将表格ID从一个屏幕导航到另一个屏幕，以及如何将ID导航到另一个屏幕？

Question

如您所见，我正在尝试将具有表ID的一个屏幕导航到另一个屏幕，并且还尝试在react-navigation-v5的帮助下将ID导航到第二个屏幕。

在App.js文件中，我使用堆栈导航来导航屏幕，在MainActivity中仅用于显示学生的姓名。按学生的姓名时，它将使用学生ID导航到SecondActivity屏幕。在SecondActivity屏幕中，它显示学生的详细信息。在ID的帮助下，例如ID，姓名等。要使用this.props.navigation.state.params.FlateListIdHolder来获取ID，在SecondActivity屏幕中获取ID。

当我在学生列表上按名字时，它会在下面显示错误。

Console.error：带有导航负载{“ name”：“ SecondActivity”，“ params”：{“ FlateListClickItemHolder”：“ pankaj”}}的操作“ NAVIGATE”未被任何导航器处理。

您是否有一个名为“ SecondActivity”的屏幕？

= App.js

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import MainActivity from './pages/MainActivity';
import SecondActivity from './pages/SecondActivity';


const Stack = createStackNavigator();

function App() {
  return (
      <NavigationContainer>
          <Stack.Navigator>
              <Stack.Screen name="MainActivity " component={MainActivity} />
              <Stack.Screen name="SecondActivity" component={SecondActivity} />
          </Stack.Navigator>
      </NavigationContainer>
  );
};

export default App;

= MainActivity

export default class MainActivity extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoding : true
        }
        this.arrayholder = [];
    }
    OpenSecondActivity(id){
        this.props.navigation.navigate('SecondActivity', {FlateListIdHolder: id });
    }
   componentDidMount() {
        return fetch('http://192.168.43.89:8080/FilterJsonListView/CollegeStudentsList.php')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson
                }, function () {
                    this.arrayholder = responseJson;
                });
            })
            .catch((error) => {
                console.error(error);
            })
    }
    FlateListItemSeparator = () => {
        return (
            <View
                style={{
                    height: 1,
                    width: "100%",
                    backgroundColor: "#000"
                }}
            />
        );
    }

    render() {
        if (this.state.isLoding) {
            <View style={{ flex: 1, paddingTop: 20 }}>
                <ActivityIndicator /
                >
            </View>
        }
        return (
            <View style={styles.MainContainer}>
                <FlatList
                    data={this.state.dataSource}
                    ItemSeparatorComponent={this.FlateListItemSeparator}
                    renderItem={({ item }) =>
                        <Text
                            key={item.id}
                            style={styles.FlatListItemStyle}
                            onPress={this.OpenSecondActivity.bind(this, item.name)}
                        >
                            {item.name}
                        </Text>
                    }
                    keyExtractor={(item, index) => index.toString()}
                />   
            </View>
            );
    }
}

= SecondActivity

 export default class SecondActivity extends Component {

    constructor(props) {
        super(props)
        this.state = {
            IdHolder: '',
            NameHolder: '',
            SemesterHolder: '',
            DepartmentHolder: '',
            PhoneNumberHolder:''
        }
    }
    componentDidMount() {
        fetch('http://192.168.43.89:8080/FilterJsonListView/Filter.php', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({

                id: this.props.navigation.state.params.FlateListIdHolder

            })

        }).then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    IdHolder: responseJson[0].id,
                    NameHolder: responseJson[0].name,
                    SemesterHolder: responseJson[0].semester,
                    DepartmentHolder: responseJson[0].department,
                    PhoneNumberHolder: responseJson[0].phone_number

                })

            }).catch((error) => {
                console.error(error);
            });
    }
    render() {
        console.log(id);
        return (
            <View style={styles.MainContainer}>

                <View style={{ flex: 1, flexDirection: 'column' }} >
                    <Text style={styles.textViewContainer} >
                        {'id=' + this.state.IdHolder}
                    </Text>
                    <Text style={styles.textViewContainer} >
                        {'name=' + this.state.NameHolder}
                    </Text>
                    <Text style={styles.textViewContainer} >
                        {'Semester=' + this.state.SemesterHolder}
                    </Text>
                    <Text style={styles.textViewContainer} >
                        {'Department=' + this.state.DepartmentHolder}
                    </Text>
                    <Text style={styles.textViewContainer} >
                        {'Phone Number=' + this.state.PhoneNumberHolder}
                    </Text>

                </View>

            </View>
            );
    }
}