![](/img/trans.png)
[英]React Native - navigation issue “undefined is not an object (this.props.navigation.navigate)”
[英]React native navigation (undefined is not an object .. this.props.navigation.navigate
我在使用redux的方式上响应本机导航时遇到了这个问题。
包含要导入的webservicecall组件,此处从'../components/ListComponent'导入ListComponent;
包含动作ActionTypes export const SERVICE_PENDING ='service_pending'等。
组件,将数据呈现在列表等上
然后是减速器零件
存储绑定将在应用程序的初始位置完成,并传递到其他应用程序组件,如下所示。
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from '../reducers/index';
import ServiceAction from '../actions/listserviceaction';
import { Container, Content, Picker, Button, Text } from "native-base";
export default class RenderList extends Component {
render() {
return (
<Provider store={store}>
<ServiceAction />
</Provider>
);
}
}
现在,在加载组件之后,当我在列表组件上单击onPress = {()=> this.props.navigation.navigate(“ ProfileScreen”)}时,它会引发错误(未定义不是对象..this.props。 navigation.navigate)有任何问题吗? 有更好的解决方案吗? 谢谢。
在您的ServiceAction上包含this.props.navigation
这样的内容:
<ServiceAction navigation={this.props.navigation}/>
因为props.navigation
默认是在父组件上
在ServiceAction组件上,您将可以访问导航,例如:
..
goToSignUp() {
this.props.navigation.navigate('SignUp');
}
..
对我而言,之前也感到困惑。 干杯!
为了从一个屏幕导航到另一个屏幕,两个屏幕都应该在StackNavigator
。 您能否显示您的堆栈导航器和您要在其间导航的屏幕代码。
要使用反应导航,您必须执行以下步骤:
1: npm i react-navigation --save
2: npm link react-navigation
3:像这样修改堆栈的顶层类:
import page_1 from 'YOUR_PAGE1_PATH'
import page_2 from 'YOUR_PAGE2_PATH'
import { createStackNavigator } from 'react-navigation'
export default createStackNavigator({
p1 : page_1 //remember the first modified shown first
p2 : page_2
})
如果要导航到第2页,则在page_1中:
onPress(()=> this.props.navigation.navigate('p2' , 'maybe other params'))
注意:您必须调用p1,p2而不是page_1或page_2!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.