反應本機導航（未定義不是對象.. this.props.navigation.navigate

Question

我在使用redux的方式上響應本機導航時遇到了這個問題。

Listserviceaction.js

包含要導入的webservicecall組件，此處從'../components/ListComponent'導入ListComponent；

Listactiontype.js

包含動作ActionTypes export const SERVICE_PENDING ='service_pending'等。

listcomponent.js

組件，將數據呈現在列表等上

減速機

然后是減速器零件

幕后/ 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”）}時，它會引發錯誤（未定義不是對象..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 。 您能否顯示您的堆棧導航器和您要在其間導航的屏幕代碼。

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頁，則在page_1中：

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

注意：您必須調用p1，p2而不是page_1或page_2！