React Native Paper 按钮不会触发 onpress
Posted
技术标签:
【中文标题】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 按钮替换了这个按钮,这很烦人,因为我必须设置它的样式:(【讨论】:
以上是关于React Native Paper 按钮不会触发 onpress的主要内容,如果未能解决你的问题,请参考以下文章
React-Native:无法触发 Native UIButton 触摸事件