无法在本机反应中导航到另一个屏幕

Question

I am using props in my code to show items but I am not able to navigate to any other screen after click on it. I am also define as const { navigate } = this.props.navigation; but showing me error as in screen shot.

Here is my code. This code is in same Indprotype.js file (two separate .js files are not used)

  class Withwish extends React.Component {

      ProPressed(productid){
        const { navigate } = this.props.navigation;
        const params = { productid };
        navigate('Product', params);
      }

    render() {
          // const { navigate } = this.props.navigation;
      return (
                  <View style={styles.word}>
                  <TouchableHighlight onPress={() => this.ProPressed(this.props.id)}>
                    <Image source={{uri: 'https://res.cloudinary.com/hu2lcbj2n/' + this.props.image}} />
                  </TouchableHighlight>  
              </View>
      );
    }
  }


  export default class Indprotype extends React.Component {
     // const { navigate } = this.props.navigation;
    render() {
       const items = this.state.qwerty.data;
      return (
          <GridView
              renderItem={item => (
                <Withwish
                  image = {item.p1.image}
                  id = {item.p1.id}
                 />
            )}
          />
      );
    }
  }

Answer 1

Give this a try.

Basically I'm passing the navigation prop from the Indprotype component through to the Withwish component.

Note: I'm assuming here that Indprotype itself receives the navigation prop from a router or similar.

class Withwish extends React.Component {

    ProPressed(productid){
      const { navigate } = this.props.navigation;
      const params = { productid };
      navigate('Product', params);
    }

  render() {
        // const { navigate } = this.props.navigation;
    return (
                <View style={styles.word}>
                <TouchableHighlight onPress={() => this.ProPressed(this.props.id)}>
                  <Image source={{uri: 'https://res.cloudinary.com/hu2lcbj2n/' + this.props.image}} />
                </TouchableHighlight>  
            </View>
    );
  }
}


export default class Indprotype extends React.Component {
    // const { navigate } = this.props.navigation;
  render() {
      const items = this.state.qwerty.data;
    return (
        <GridView
            renderItem={item => (
              <Withwish
                navigation = {this.props.navigation}
                image = {item.p1.image}
                id = {item.p1.id}
                />
          )}
        />
    );
  }
}