React native navigation（undefined不是对象.. this.props.navigation.navigate

Question

我在使用redux的方式对本地导航做出反应时遇到了麻烦。

Listserviceaction.js

包含webservicecall组件正在导入这里导入ListComponent来自'../components/ListComponent';

Listactiontype.js

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

listcomponent.js

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

reducers

然后是减速器部分

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

}

现在，在加载组件之后，当我在listcomponent上单击OnPress = {（）=> this.props.navigation.navigate（“ProfileScreen”）}时，它会触发一个错误（undefined不是一个对象.. this.props。 navigation.navigate）有什么问题吗？更好的解决方案？谢谢。

Answer 1

在您的ServiceAction中加入this.props.navigation，如下所示：

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

因为props.navigation默认位于您的父组件上

在ServiceAction组件上，您将访问以下组织：

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

对我来说也很困惑。干杯!

Answer 2

为了从一个屏幕导航到另一个屏幕，两个屏幕应该在StackNavigator。你能否请展示你想要在其间导航的屏幕的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
})

然后在page_1中，如果你想导航到第2页：

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

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