React Native Paper 按钮不会触发 onpress

Posted 2023-05-07

【中文标题】React Native Paper 按钮不会触发 onpress

【英文标题】：React native paper button doesnt trigger onpress

【发布时间】：2021-03-28 12:04:07

【问题描述】：

我正在使用 firebase auth 进行身份验证并做出本机反应。我有一个 react native paper 按钮来提交表单，但是当您单击它时不会触发 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 );
  ;
;

【问题讨论】：

从 store/actions/auth 发布您的注册方法

你检查了吗，控制台登录onPress？

你检查过文档吗？

@NishargShah 是的

@NishargShah 我注意到 console.log 确实有效

【参考方案1】：

我在 2 周后修复了它！

这就是我所做的：

我使用了 firebase rest 而不是 firebase web sdk（我认为这并没有解决问题，但我这样做是为了更习惯于传统后端） react-native-paper 包有一个错误，所以我用一个普通的 RN 按钮替换了这个按钮，这很烦人，因为我必须设置它的样式:(