无法读取React导航中Undefined的属性“navigate”

dddzy1tm 于 2023-04-07 发布在 React

关注(0)|答案(5)|浏览(180)

我是React Native新手。我想做的是将react navigation添加到我的登录页面，用户可以单击按钮并导航到注册页面，但我得到了错误Cannot read property 'navigate' of Undefined。我已经在互联网上搜索了解决方案，但没有运气。所以这对我没有帮助-React Navigation - cannot read property 'navigate' of 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
    }
});

react-native

来源：https://stackoverflow.com/questions/44305064/cannot-read-property-navigate-of-undefined-in-react-navigation

5条答案

按热度按时间

wooyq4lh1#

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

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

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

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

工作示例here。

赞(0）回复(0）举报 2023-04-07

8qgya5xd2#

将此代码写入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
    }
});

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

希望这对你有帮助。

赞(0）回复(0）举报 2023-04-07

bkhjykvo3#

我认为你需要包括navigationOptions，例如：

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

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

另外，您需要确保使用AppRegistry.registerComponent('glfm', () => Stacks);而不是AppRegistry.registerComponent('glfm', () => tapak);

赞(0）回复(0）举报 2023-04-07

juzqafwq4#

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

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

请阅读https://reactnavigation.org/docs/en/navigation-prop.html的文档

赞(0）回复(0）举报 2023-04-07

dfddblmv5#

我也遇到了同样的问题，我们必须知道stack.navigator为它的子函数提供了一个名为'navigation'的默认prop。所以，请确保您也将该默认prop作为prop提供给其他子函数。现在函数navigation将不再是未定义的。

赞(0）回复(0）举报 2023-04-07