How to print news detail in react native?-CodePudding

In my file AppNavigator.js already added the Detail.js:

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Splash from '../screens/Splash';
import TabNavigator from './NewsList';
import Details from './Detail';

const AppStack = createStackNavigator();

export default function AppNavigator() {
    return(
        <AppStack.Navigator>
            <AppStack.Screen name="Splash" component={Splash} options={{headerShown:false}}/>
            <AppStack.Screen name="Root" component={TabNavigator} options={{headerShown:false}} />
            <AppStack.Screen name="Details" component={Details} options={{headerShown:false}} />
        </AppStack.Navigator>
    );
}

In my NewsList.js (code complete) file where I list all the news, I have the following parameter where information is intended to be retrieved when clicking on any news:

<TouchableOpacity onPress={()=>this.props.navigation.navigate("Details",{news:item})}>

The problem that I present in the file Detail.js where I can not get the information of the news to print all the information of the news:

import React, { Component } from 'react';
import { View,
  Text,
  TouchableOpacity,
  Dimensions,
  FlatList,
  Image,
  StyleSheet,
  ScrollView,
  ImageBackground
} from 'react-native';

//const navigation = useNavigation();
//const route = useRoute();
//const { navigate } = this.props.navigation;

var {height, width } = Dimensions.get('window');
const baseUrl = "https://spektand.com/restapijson.php?key=bc989b8b068828fbefcea26e55160a3fe79cacaf067e874c531ad193d06c2d9b"

//this.props.route.params.source v5
//this.props.navigation.getParam('source') v4
export default class Details extends React.Component {
    render(){
        const data = this.props.navigation.getParam('news')
        return(
            <View style={{flex:1}}>
                <Text>Screen Details {JSON.stringify(data)} </Text>
            </View>
        )
    }
}

When I press it prints the following error:

ERROR TypeError: this.props.navigation.getParam is not a function. (In 'this.props.navigation.getParam('news')', 'this.props.navigation.getParam' is undefined)

Can you explain to me what I am doing wrong? information of the versions that I am using in my application:

  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "@types/react-native-swiper": "^1.5.12",
    "axios": "^0.24.0",
    "formik": "^2.2.9",
    "link": "^0.1.5",
    "lodash": "^4.17.21",
    "react": "17.0.2",
    "react-native": "^0.66.4",
    "react-native-animatable": "^1.3.3",
    "react-native-countdown-component": "^2.7.1",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-pager-view": "^5.4.9",
    "react-native-reanimated": "^2.2.4",
    "react-native-redux": "^1.0.11",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-swiper": "^1.6.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.0.0",
    "react-navigation": "^4.4.4",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.1",
    "superagent": "^6.1.0"
  }

I have already checked some sources, I have tried the following https://jsfiddle.net/Lb01t9gc/ but nothing I manage to get it to work.

CodePudding user response：

You can get route params like that: this.props.route.params.news