Question

无法在 React Native 中导航到另一个屏幕

2018-01-30

414

javascript react-native react-navigation

我在代码中使用 props 来显示项目，但单击后无法导航到任何其他屏幕。我还将其定义为 const { navigation } = 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}
                />
          )}
        />
    );
  }
}