无法读取 React Navigation 中未定义的属性“导航”

Question

我是 React Native 新手。我想要做的是将反应导航添加到我的登录页面，用户可以在其中单击按钮并导航到注册页面，但出现错误Cannot read property 'navigate' of Undefined。我已经通过互联网搜索了解决方案，但没有运气。这对我没有帮助 - React Navigation - 无法读取 undefined和与其他相同的属性“导航”。

这是我的代码

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

Answer 1

在 index.ios.js 中渲染StackNavigator并将按钮移动到Login组件：

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

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

登录.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>
    );
  }
}

工作示例 在这里。