反应本机导航（未定义不是对象.. this.props.navigation.navigate

Question

关于这个问题，我在使用redux时对本机导航做出了反应。

Listserviceaction.js

包含此处要导入的webservicecall组件 从'../components/ListComponent'导入ListComponent；

Listactiontype.js

包含动作ActionTypes 导出const SERVICE_PENDING ='service_pending'等。

listcomponent.js

组件，将数据呈现在列表等上

减速器

然后是减速器

scenes / List.js

商店绑定将在应用程序的初始位置完成，并向下传递到其他应用程序组件，如下所示。

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”）}时 listcomponent会引发错误（未定义不是对象..this.props.navigation.navigate）有任何问题吗？有更好的解决方案吗？ 谢谢。

Answer 1

在this.props.navigation上包含以下内容：

<ServiceAction navigation={this.props.navigation}/>

因为props.navigation默认是在父组件上

，在ServiceAction组件上，您将访问导航，例如：

..
goToSignUp() {
   this.props.navigation.navigate('SignUp');
}
..

对我而言，之前也感到困惑。干杯！

Answer 2

要从一个屏幕导航到另一个屏幕，两个屏幕都应位于StackNavigator中。您能显示要浏览的屏幕的堆栈导航器和屏幕代码吗？

Answer 3

要使用反应导航，您必须执行以下步骤：

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，则在页面_1：

onPress(()=> this.props.navigation.navigate('p2' , 'maybe other params'))

注意：：您必须呼叫p1，p2而不是page_1或page_2！