TypeError：navigation.getParam 不是函数

Question

我正在使用带有堆栈 5 版本的反应导航。

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

这是一个包含您需要的解决方案的小吃，我对您的代码进行了一些更改，您的错误现在在这个小吃中得到修复。 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

Answer 2

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

//Home.js

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

在Movie.js 中，您可以像这样访问道具。

//Movie.js
componentDidMount() {
        this.getMovieDetails(this.props.route.params) 
    }

更新：

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

    //Movie.js
    componentDidMount(){
          const navObject = this.props.navigation.state.params 
          console.log(navObject )
    }

Answer 3

this.state = {
    do:{
      name: props.route.params.name,
      color: props.route.params.color
    }
};