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

Question

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

这是我的代码。 此代码在同一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}
                 />
            )}
          />
      );
    }
  }

Answer 1

试试看。

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

注意：我在这里假设Indprotype本身从路由器或类似设备接收navigation道具。

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