Кнопка React native paper не запускает onpress

#reactjs #react-native #react-native-paper

#reactjs #react-native #react-native-paper

Вопрос:

Я выполняю аутентификацию с помощью firebase auth и react native. У меня есть кнопка react native paper для отправки формы, но при нажатии она не запускает функцию onPress.

Я использую firebase 7.9.0 и react native 39.0.4. Что я пробовал:

  • превращение ее в именованную функцию
  • превращение onPress в функцию журнала консоли

Код кнопки:

 <Button
          style={styles.button}
          mode="contained"
          onPress={() =>
            dispatch(
              signUp(formState.values.email, formState.values.password)
            )
          }
          color={colors.primary}
        >
          Submit
        </Button>
 

весь файл:

 import React, { useCallback, useReducer } from "react";
import {
  StyleSheet,
  View,
  KeyboardAvoidingView,
  ScrollView,
} from "react-native";
import Input from "components/Input";
import { Card, Button } from "react-native-paper";
import colors from "config/Colors";
import { useDispatch } from "react-redux";
import { signUp } from "store/actions/auth";
const UPDATE = "UPDATE";

const formReducer = (state, action) => {
  switch (action.type) {
    case UPDATE:
      const values = {
        ...state.values,
        [action.input]: action.value,
      };
      const validities = {
        ...state.validities,
        [action.input]: action.isValid,
      };
      let formIsValid = Object.keys(validities).every((key) => {
        return validities[key] === true;
      });
      // console.log("formReducer -> formIsValid", formIsValid);

      return {
        ...state,
        values,
        validities,
        formIsValid,
      };
    default:
      return state;
  }
};

function AuthForm() {
  const dispatch = useDispatch();
  const [formState, dispatchFormState] = useReducer(formReducer, {
    values: {
      email: "",
      password: "",
    },
    validities: {
      email: false,
      password: false,
    },
    formIsValid: false,
  });

  // const onSignUp = () => {
  //   console.log("Start");
  //   dispatch(signUp(formState.values.email, formState.values.password));
  //   console.log("Done");
  // };

  const onChange = useCallback(
    (input, value, isValid) => {
      dispatchFormState({ type: UPDATE, value, isValid, input });
    },
    [formState]
  );
  return (
    <KeyboardAvoidingView
      behavior="padding"
      keyboardVerticalOffset={50}
      style={styles.screen}
    >
      <Card style={styles.card}>
        <ScrollView>
          <Card.Title title="Login" />
          <Input
            id="email"
            label="E-Mail"
            keyboardType="email-address"
            required
            email
            autoCapitalize="none"
            errorText="Please enter a valid email"
            onInputChange={onChange}
          />
          <Input
            id="password"
            label="Password"
            secureTextEntry
            required
            minLength={5}
            autoCapitalize="none"
            errorText="Please make sure your password is longer than 5 characters"
            onInputChange={onChange}
          />
          <Card.Actions>
            <Button
              style={styles.button}
              mode="contained"
              onPress={() =>
                dispatch(
                  signUp(formState.values.email, formState.values.password)
                )
              }
              color={colors.primary}
            >
              Submit
            </Button>
          </Card.Actions>
          <Card.Actions>
            <Button
              style={styles.button}
              mode="text"
              color={colors.accent}
              onPress={() => {}}
            >
              Switch To Sign Up
            </Button>
          </Card.Actions>
        </ScrollView>
      </Card>
    </KeyboardAvoidingView>
  );
}

AuthForm.navigationOptions = {
  headerTitle: "Authenticate",
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 10,
  },
  card: {
    padding: 20,
    height: "100%",
  },
  button: {
    width: "100%",
  },
});

export default AuthForm;
 

Действие авторизации:

 import firebase from "config/firebase";
export const SIGN_UP = "SIGN_UP";

export const signUp = (email, password) => {
  return async (dispatch) => {
    const res = await firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .catch(console.error);
    console.log(res);
    dispatch({ type: SIGN_UP });
  };
};
 

Комментарии:

1. Опубликуйте свой метод регистрации в store / actions / auth

2. вы проверяли, консоль входит в систему onPress?

3. вы проверяли документы?

4. @NishargShah да

5. @NishargShah я заметил консоль. журнал работает

Ответ №1:

Я исправил это через 2 недели!

Вот что я сделал:

  • Я использовал firebase rest вместо firebase web sdk (я не думаю, что это устранило проблему, но хорошо, что я сделал это, чтобы лучше привыкнуть к традиционным бэкэндам)
  • Произошла ошибка с пакетом react-native-paper, поэтому я заменил кнопку обычной кнопкой RN, что раздражало, потому что мне пришлось ее стилизовать: (