TypeError：navigation.getParam不是函数

Question

我正在使用Stack 5版本的React导航。

App.js

export default class App extends React.Component {
  render() {
     return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Movie" component={Movie} />
      </Stack.Navigator>
    </NavigationContainer>
     )
  }
}

Home.js

     <TouchableHighlight onPress={() => { this.props.navigation.navigate('Movie', { title: item.title, img: item.img, id: item.imdbID }) }}>
      // code omitted               
      </TouchableHighlight>

我单击电影项目以查看电影详细信息，但收到错误消息，并显示：

TypeError: navigation.getParam is not a function

Movie.js

   componentDidMount() {
        this.getMovieDetails(this.props.navigation.getParam('id', 'n/a')) 
    }

    getMovieDetails = async (id) => {
         const results = await fetchById(id)
         this.setState({ info: results })
    }

    render() {
        const { navigation } = this.props
        const title = navigation.getParam('title', 'N/A');
        const img = navigation.getParam('img', 'https://banner2.kisspng.com/20180216/kee/kisspng-photographic-film-reel-clip-art-movie-film-5a8677562304e0.0541516415187618141435.jpg');
}

您能帮我解决这个问题吗？我正在等待您的回复。

提前感谢

Answer 1

这是通过导航传递react-native时在props中的常见问题。您可以尝试这种方法，看看是否可行。

//Home.js

<TouchableHighlight onPress={() => { this.props.navigation.navigate({'Movie', { title: item.title, img: item.img, id: item.imdbID }}) }}>

Answer 2

这里是您需要的解决方案的点心，我对您的代码进行了一些更改，现在您的错误已在此点心中得到修复。You were trying to access getParams function but that wasn't available inside the navigation object，而不是getting params with getParams function I directly get these params from this.pros.navigation.route.params

https://snack.expo.io/@waheed25/home_movie