#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, что раздражало, потому что мне пришлось ее стилизовать: (