undefined не является объектом 'this2.props.navigation.navigate' - PullRequest
0 голосов
/ 22 февраля 2019

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

export default class ClassName1 extends React.Component {
    constructor(props) {
        super(props);
    }
}

, но когда я вызываю this.props.navigation в приведенном ниже классе, он выдает ошибку

class ClassName2 extends React.Component {
     constructor(props) {
         super(props);
     }
}

вот так явызов функции в ClassName2

<TouchableOpacity onPress={() => this.props.navigation.navigate("Report") }>
    <Text style={style.modalContainerText}>
         inappropriate Content
    </Text>
</TouchableOpacity>

, оба класса находятся в одном файле.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Если ваш класс включен в функцию StackNavigator, у вас будет доступ к this.props.navigation, если нет необходимости использовать функцию withNavigation, например, ниже

Пример использования StackNavigator

import React, { Component } from 'react';
import { Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

export class ClassName2 extends Component {
  render() {
    return <Button title="This will work" onPress={() => { this.props.navigation.navigate('someScreen') }} />;
  }
}

export const myStackNavigator = StackNavigator({
  myScreen: ClassName2
})

Пример использования withNavigation

import React, { Component } from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class ClassName2 extends Component {
  render() {
    return <Button title="This will work" onPress={() => { this.props.navigation.navigate('someScreen') }} />;
  }
}

export default withNavigation(ClassName2);
0 голосов
/ 22 февраля 2019

Это не совсем понятно из вашего вопроса, но я думаю, вы используете ClassName2, как это внутри ClassName1 (с некоторыми другими компонентами и конструктором конечно):

class ClassName1 extends React.Component {
    render() {
        return <ClassName2 />
    }
}

Теперь я думаю,Вы используете ClassName1 в качестве маршрута с реагированием-навигацией.Компонент ClassName1 автоматически получает реквизит this.props.navigation с помощью реакции-навигации.Чтобы передать его элементу ClassName2, чтобы он также мог вызывать навигацию, это будет выглядеть так:

class ClassName1 extends React.Component {
    render() {
        return <ClassName2 navigation={this.props.navigation} />
    }
}

Это основано на предположениях, поэтому дайте мне знать, если это то, что решит вашу проблему,Если да, я обновлю ваш вопрос, чтобы предоставить информацию, которая бы лучше описывала вашу проблему:)

...