Исправить необработанное отклонение обещания в реакции натива

Question

Я пытаюсь перейти на новый экран, используя реагирующую навигацию, но сталкиваюсь с предупреждением [Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.navigation.navigate')]. Ошибка не выдается (это только предупреждение), но приложение не переходит на следующий экран.

Я безуспешно пытался вызвать отдельную функцию, содержащую код навигации, и использовал функцию стрелки, но ни одна из опций не работала.

Вот мой код ...

import React from 'react';
import {
  StyleSheet,
  View,
  TextInput,
  AlertIOS,
} from 'react-native';

import { withNavigation } from 'react-navigation';

import database from '../Database.js';

const db = new database();


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

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="Access Code"
          returnKeyType="go"
          onSubmitEditing={text => {
            db.isValidCode(text.nativeEvent.text).then(isValid => {
              if (isValid) {
                this.navigation.navigate('Create')// this throws warning
              } else {
                AlertIOS.alert(
                  "We're Sorry...",
                  'The code you entered was not found in the database! Please contact support for further assistance.'
                );
              }
            }).catch(function(error) {
              console.log(error);
              throw error;
            }) // this "catch" statement didn't fix the warning
          }}
        />
      </View>
    );
  }
}

export default withNavigation(LoginForm);

И файл базы данных ...

var firebase = require('firebase');

if (!firebase.apps.length) {
    firebase.initializeApp({
        apiKey: "key",
        authDomain: "domain",
        databaseURL: "url",
        storageBucket: "bucket",
    });
}

class Database {
    constructor() {
      this.codesRef = firebase.database().ref('codes');
    }

    async isValidCode(text) {
      let codeIsFound = false;
      let identifier = "";
      let db_snapshot = await this.codesRef.once('value');
       db_snapshot.forEach(code_snapshot => {
           if (text == code_snapshot.val().value) {
              codeIsFound = true;
              identifier = code_snapshot.key;
            }
       });
       return codeIsFound; 
    };

}

module.exports = Database;

Я не уверен, почему навигация не работает. Все работало нормально и было намного проще, когда функция была в том же файле, в котором она использовалась. Любая помощь / указатели приветствуются!

Answer 1

Вам необходимо использовать:

this.props.navigation.navigate('Create')

вместо:

this.navigation.navigate('Create')

потому что withNavigation добавляет navigation к свойствам вашего компонента, а не к самому компоненту.