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

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.

我在我的代码中使用道具来显示项目，但点击它后我无法导航到任何其他屏幕。我也定义为const {navigate} = this.props.navigation;但在屏幕截图中显示我的错误。

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

这是我的代码。此代码位于相同的Indprotype.js文件中（不使用两个单独的.js文件）

  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}
                 />
            )}
          />
      );
    }
  }

1 个解决方案

#1

Give this a try.

试一试。

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

基本上我将导航道具从Indprotype组件传递到Withwish组件。

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

注意：我假设Indprotype本身从路由器或类似设备接收导航道具。

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}
                />
          )}
        />
    );
  }
}

#1