Реагировать на встроенную навигацию (undefined не является объектом .. this.props.navigation.navigate

Question

У меня возникла проблема, связанная с этой проблемой при реагировании на встроенную навигацию, когда я использую redux.

Listserviceaction.js

содержит компонент webservicecall, импортируемый сюда, импортирует ListComponent из '../ components / ListComponent ';

Listactiontype.js

содержит действие ActionTypes export const SERVICE_PENDING =' service_pending 'и т. д.

listcomponent.js

theкомпонент, отображает данные в списке и т. д.

редукторы

, а затем редуктор Part

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")} в моем списке компонентов выдает ошибку (undefined не является объектом .. this.props.navigation.navigate) есть проблемы?лучшее решение?Спасибо.

Answer 1

для использования реагирующей навигации вы должны выполнить следующие шаги:

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

затем на странице_1, если вы хотите перейти на страницу 2:

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

Примечание: вы должны вызывать p1, p2 вместо page_1 или page_2!

Answer 2

Включите в свой ServiceAction this.props.navigation что-то вроде этого:

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

, потому что props.navigation по умолчанию для вашего родительского компонента

и для компонента ServiceAction, к которому вы получите доступНавигация вроде:

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

Меня и раньше смущало.Ура!

Answer 3

для перехода от одного экрана к другому, оба экрана должны быть в StackNavigator.Не могли бы вы показать свой стекавигатор и код экранов, между которыми вы пытаетесь перемещаться.