reactjs - React Native Paper 按钮不会触发 onpress

问题描述

我正在使用 firebase auth 进行身份验证并做出本机反应。我有一个反应本机纸张按钮来提交表单，但是当您单击它时不会触发 onPress 功能。

我正在使用 firebase 7.9.0 并反应原生 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 });
  };
};

标签： reactjsreact-nativereact-native-paper

reactjs - React Native Paper 按钮不会触发 onpress

问题描述

解决方案

推荐阅读