Невозможно передать параметры маршрутам в реагирующей навигации v3

Question

Я могу перемещаться между экранами без параметров в реагирующей навигации, но не могу при передаче параметров.

У меня есть два экрана с именем

UsersScreen

, который представляет собой список всех пользователей и

UserDetailsScreen

, который представляет собой список одного пользователя, который будет отображаться при

кнопка пользователя

вызывается с

UsersScreen

, но вместо отображения

данные пользователя

, он отображал эту общую ошибку

Невозможно прочитать свойство 'getParam' из неопределенного TypeError: Невозможно прочитать свойство 'getParam' из неопределенного в UserDetailsScreen.render (модуль: //components/UserDetailsScreen.js.js! Транспортируется: 51: 21) в га ([внутренние закуски] в га ([внутренние закуски] в Js ([внутренние закуски] в Ys ([перекусить изнутри] в Ps ([перекусить изнутри] в Ts ([перекусить изнутри] в [snac] k внутренностей] в t.unstable_runWithPriority ([закуски внутренних органов] в uo (https://snack.expo.io/web-player/36/static/js/2.0dacf2c5.chunk.js: 1: 1049642 )

Теперь я знаю, что в нем говорится, что getParam не определен, но Я не могу понять, как я не определяю это, так как я определил это в

UsersScreen

Это

UsersScreen

  import React, { Component } from 'react';
    import { StyleSheet, FlatList, ActivityIndicator, View, Text, ScrollView } from 'react-native';
    import { ListItem, Button } from 'react-native-elements';

    export default class UsersScreen extends Component {
     static navigationOptions = ({ navigation }) => {
        return {
          title: 'User List',
          headerRight: (
            <Button
              buttonStyle={{ padding: 0, backgroundColor: 'transparent' }}
              icon={{ name: 'add-circle', style: { marginRight: 0, fontSize: 28 } }}
              onPress={() => { 
                navigation.navigate('Home', {
                  onNavigateBack: this.handleOnNavigateBack
                }); 
              }}
            />
          ),
        };
      };

      constructor(props) {
        super(props);
        this.state = {
          isLoading: true,
           users: [
            { names: "Tijani Majekodunmi", id: 1, matric: 569, drugCase: 'Marijuana', attendance:['present', 'present', 'present', 'absent', 'present', 'absence'] },
            { names: "Yele Soworo", id: 2, matric: 147, drugCase: 'Cocaine', attendance:['absent', 'present', 'absent', 'absent', 'present', 'absence'] },
            { names: "John Okafor", id:3, matric: 852, drugCase: 'Codeine', attendance:['present', 'present', 'present', 'absent', 'present', 'absence']}

          ],
          notFound: 'Users not found.\nPlease click (+) button to add it.'
        };
      }

      render() {
        const {users} = this.state;
        return(
        <ScrollView>
    <View>
    {users.map((item, index) => (
    <View>
    <Text>{item.names}</Text>
    <Text>{ item.id }</Text>
    <Button
              title="Go to Details"
              onPress={() => {
                /* 1. Navigate to the Details route with params */
                this.props.navigation.navigate('UserDetails', {
                  id: item.id,
                  matric: item.matric,
                  drugCase: item.drugCase,
                  attendance: item.attendance
                });
              }}
            />
    </View>
    ))}
    </View>
    </ScrollView>

        );
      }
    }

    const styles = StyleSheet.create({
      container: {
       flex: 1,
       paddingBottom: 22
      },
      item: {
        padding: 10,
        fontSize: 18,
        height: 44,
      },
      activity: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center'
      },
      message: {
        padding: 16,
        fontSize: 18,
        color: 'red'
      }
    });

and this is the 
> UserDetailsScreen

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Image, ActivityIndicator, View, Text } from 'react-native';
import { Card, Button } from 'react-native-elements';

export default class UserDetailsScreen extends Component {
  static navigationOptions = {
    title: 'User Details',
  }

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      user: {},
      id: '',
    };
  }

  render() {
    const { user } = this.props;
    const id = user.getParam('id', 1);
    const matric = user.getParam('matric', 777);

    return (
      <ScrollView>
      <View>
      <Text>Welcome</Text>
      <Text>UserId: {JSON.stringify(id)}</Text>
      </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  subContainer: {
    flex: 1,
    paddingBottom: 20,
    borderBottomWidth: 2,
    borderBottomColor: '#CCCCCC',
  },
  activity: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  detailButton: {
    marginTop: 10
  }
})

Как передать и получить доступ к

сведениям пользователя

, переданным из

UsersScreen

до

UserDetailsScreen

Answer 1

вот как вы получаете реквизит:

this.props.navigation.getParam('UserDetails','DefaultValue');

Желательно сделать это в вашем componentDidMount()