Не удается отойти от компонента - PullRequest
Новая
       15

Не удается отойти от компонента

0 голосов
/ 14 января 2019

Я не могу отойти от своего компонента, несмотря на попытки как this.props.navigation.navigate, так и NavigationService

Чтобы проверить это, я создал простую кнопку для навигации, и она работает, но когда я использовал ее в моем formik и response-native, она не удалялась

Кто-нибудь сталкивался с такими ситуациями раньше? Как вы решаете? ниже мой код

спасибо 

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  AsyncStorage,
  Text,
  TouchableHighlight
} from "react-native";
import { Button } from "react-native-elements";
import { Formik } from "formik";
import * as Yup from "yup";
import { Mutation } from "react-apollo";

import Input from "../components/Input";
import NavigationService from "../../navigation/NavigationService";
import { SIGNIN } from "../../graphql/queries";

const FormValidationSchema = Yup.object().shape({
  email: Yup.string()
    .email("Not valid email")
    .required("Email is required"),
  password: Yup.string()
    .min(3)
    .required("Password is required")
});

class EmailSigninScreen extends Component {
  _handleSubmit = async (values, bag, signin) => {
    console.log(values, bag, signin);
    try {
      const data = await signin({
        variables: {
          email: values.email,
          password: values.password
        }
      });
      await AsyncStorage.setItem("token", data.signin.token);
      this.props.navigation.navigate("Main");
      // NavigationService.navigate("Main");
    } catch (error) {
      bag.setSubmitting(false);
      bag.setErrors(error);
    }
  };

  render() {
    const { container, buttonStyle } = styles;

    return (
      <View style={container}>
        <Mutation mutation={SIGNIN}>
          {(signin, { error }) => {
            console.log(error);
            return (
              <Formik
                initialValues={{ email: "", password: "" }}
                onSubmit={(values, bag) =>
                  this._handleSubmit(values, bag, signin)
                }
                validationSchema={FormValidationSchema}
                render={({
                  values,
                  handleSubmit,
                  errors,
                  touched,
                  setFieldValue,
                  setFieldTouched,
                  isValid,
                  isSubmitting
                }) => (
                  <React.Fragment>
                    <Input
                      label="Email"
                      autoCapitalize="none"
                      autoComplete="none"
                      value={values.email}
                      onChange={setFieldValue}
                      onTouch={setFieldTouched}
                      name="email"
                      error={touched.email && errors.email}
                    />
                    <Input
                      label="Password"
                      autoComplete={false}
                      autoCapitalize="none"
                      secureTextEntry
                      name="password"
                      value={values.password}
                      onChange={setFieldValue}
                      onTouch={setFieldTouched}
                      error={touched.password && errors.password}
                    />
                    <Button
                      backgroundColor="purple"
                      buttonStyle={buttonStyle}
                      title="Submit"
                      onPress={handleSubmit}
                      disabled={!isValid || isSubmitting}
                      loading={isSubmitting}
                    />
                    <TouchableHighlight
                      onPress={() => this.props.navigation.navigate("Main")}
                    >
                      <Text>Jump</Text>
                    </TouchableHighlight>
                  </React.Fragment>
                )}
              />
            );
          }}
        </Mutation>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center"
    // justifyContent: "center"
  },
  buttonStyle: {
    marginTop: 20,
    width: "100%"
  }
});

export default EmailSigninScreen;

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Проблема заключается в моем асинхронном ожидании синтаксического факторинга

с учетом моей функции handleSubmit для работы в формате ниже ...

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

  //TODO refactor to async and await syntax
  _handleSubmit = (values, bag, signin) => {
    signin({
      variables: {
        email: values.email,
        password: values.password
      }
    })
      .then(async ({ data }) => {
        if (data && data.signin.token) {
          await AsyncStorage.setItem("token", data.signin.token);
          this.props.navigation.navigate("Main");
        }
      })
      .catch(err => {
        bag.setSubmitting(false);
        bag.setErrors(err);
      });
  };
0 голосов
/ 14 января 2019

Попробуйте использовать с навигацией, как это: 

import { withNavigation } from 'react-navigation';

export default withNavigation(EmailSigninScreen);

все остальное может остаться прежним

...