React native 无法读取属性'；导航'；在React导航中未定义的

我是土生土长的新手。我试图做的是将其添加到我的登录页面，用户可以单击一个按钮并导航到注册页面，但我收到一个错误

无法读取未定义的属性“navigate”。我已经在互联网上搜索了解决方案，但没有找到。这对我没有帮助，对其他人也一样

这是我的密码

index.ios.js

import React, { Component } from 'react'; 
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';

export default class tapak extends Component {
  constructor(props) {
    super(props);
    this.buttonPress = this.buttonPress.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text>
      </View>
    );
  }

  buttonPress() {
    console.log('called');
    this.props.navigation.navigate('Signup');
  }
}

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
}从“反应本机”；
从“react navigation”导入{StackNavigator}；
从“/src/screens/Login”导入登录名；
从“/src/screens/Signup”导入注册；
导出默认类tapak扩展组件{
建造师（道具）{
超级（道具）；
this.buttonPress=this.buttonPress.bind（this）；
}
render（）{
返回(
注册
);
}
按键{
log（'called'）；
this.props.navigation.navigate（'Signup'）；
}
}
常量堆栈=堆栈导航器({
登录：{
屏幕：登录
},
报名：{
屏幕：注册
}
});
将此代码写入index.ios.js

import React, { Component } from 'react'; 
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

Login.js

import React ,{Component} from 'react';
import {
  Text, View , Button,Image,
} from 'react-native';

export default class HomeScreen extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text
          onPress={() => navigate('Signup')}
        > SignUp</Text>
      </View>
    );
  }
}

import React，{Component}来自'React'；
进口{
文本、视图、按钮、图像、，
}从“反应本机”；
导出默认类主屏幕扩展组件{
render（）{
const{navigate}=this.props.navigation；
返回(
导航（'Signup'）}
>报名
);
}
}

希望这对您有所帮助。
我认为您需要包括
导航选项
，例如：

class MyComponent extends React.Component {
  static navigationOptions = {
    title: 'Great',
    // other configurations
  }

  render() {
    return (
      // your view
    )
  }
}

您还需要确保使用
AppRegistry.registerComponent（'glfm'，（）=>Stacks）而不是
AppRegistry.registerComponent（'glfm'，（）=>tapak）
在index.ios.js中呈现StackNavigator，并将按钮移动到登录组件：

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

class tapak extends Component {
  render() {
    return (
      <Stacks />
    );
  }
}

const Stacks=StackNavigator({
登录：{
屏幕：登录
},
报名：{
屏幕：注册
}
});
类tapak扩展组件{
render（）{
返回(
);
}
}

Login.js:

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.buttonPress = this.buttonPress.bind(this);
  }

  buttonPress() {
    console.log('called');
    this.props.navigation.navigate('Signup');
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text>
      </View>
    );
  }
}

导出默认类登录扩展组件{
建造师（道具）{
超级（道具）；
this.buttonPress=this.buttonPress.bind（this）；
}
按键{
log（'called'）；
this.props.navigation.navigate（'Signup'）；
}
render（）{
返回(
注册
);
}
}

工作示例
.
这个问题的唯一答案是在render（）函数中放入const{navigate}=this.props.navigation，然后可以在需要的任何组件中使用它

比如说

render() {
const { navigate } = this.props.navigation;
 return (
  <View>
    <Text>This is the home screen of the app</Text>
    <Button
      onPress={() => navigate('Profile', { name: 'Brent' })}
      title="Go to Brent's profile"
    />
  </View>
);
}

render（）{
const{navigate}=this.props.navigation；
返回(
这是应用程序的主屏幕
导航（'Profile'，{name:'Brent'}）}
title=“转到布伦特的个人资料”
/>
);
}

请阅读此文档，以了解
嗨，谢谢您的帮助。它不工作了，同样的错误。Hmmtry this:onPress={（）=>this.props.navigation.navigate（'Signup'）}从componentremove导出默认类tapak扩展组件{}因为你的index.ios.js文件显示堆栈这是否意味着我的index.ios必须在堆栈中才能工作？你在哪里使用“tapak”？它看起来不在你的堆栈里我哪里都不用它。这是我的index.ios.js文件你好，谢谢你的帮助。它不工作，同样的错误：-（。