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

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

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

Unable to navigate to another screen in react native

javascript

react-native

react-native-android

react-navigation