无法读取反应导航中未定义的属性“导航”
我是React本地新手。我正在尝试将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
}
});
只是简单的渲染StackNavigator在index.ios。 js并将按钮移动到登录组件:
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。
This works great.Thanks .. –
编写代码来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>
);
}
}
希望这对你有所帮助。
嗨,感谢您的帮助。它不工作,同样的错误。嗯 – digit
试试这个:onPress = {()=> this.props.navigation.navigate('注册')} –
从组件中删除构造函数 –
我认为你需要包括navigationOptions
,例如:
class MyComponent extends React.Component {
static navigationOptions = {
title: 'Great',
// other configurations
}
render() {
return (
// your view
)
}
}
亦喻需要确保你使用AppRegistry.registerComponent('glfm',() => Stacks);
,而不是AppRegistry.registerComponent('glfm',() => tapak);
嗨,感谢您的帮助。它不工作,同样的错误:-(。 – digit
你在哪里使用“tapak”?它看起来不像你的堆栈 – QoP
我没有在任何地方使用它。这是我的index.ios.js文件 – digit