Как перемещаться по идентификатору таблицы с одного экрана на другой и как получить идентификатор на второй экран?

Question

Как видите, я пытаюсь перейти с одного экрана с идентификатором таблицы на другой, а также пытаюсь получить идентификатор на второй экран с помощью response-navigation-v5.

В приложении. js Я использую навигацию по стеку для навигации по экранам, а в MainActivity используется для отображения только имени ученика. При нажатии на имя ученика он переходит с идентификатором ученика на экран SecondActivity. На экране SecondActivity он показывает детали ученика .Подобно Id, назовите et c с помощью идентификатора. Чтобы получить идентификатор на экране SecondActivity, используя this.props.navigation.state.params.FlateListIdHolder для получения идентификатора.

Когда я нажимаю на имя списка студентов, отображается ошибка ниже.

Console.error: действие "НАВИГАЦИЯ" с полезной нагрузкой {"name": "SecondActivity", "params": {"FlateListClickItemHolder": "pankaj"}} не было обработано никаким навигатором.

У вас есть экран с именем 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>
            );
    }
}

= * 1 024 * 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>
            );
    }
}