我正在尝试使用名为 submit 的方法(位于 loginForm 中)使用 firebase 成功登录后从登录页面导航到欢迎页面。除了使用 StackNavigation 导航到欢迎页面外,一切都正常。
我已经查看了有关此错误的所有帖子,并尝试使用到处发布的解决方案进行无数次修复,但似乎无法提出任何修复。我敢肯定这是我在这里犯的一个简单而愚蠢的错误。我将不胜感激任何帮助。
(提前道歉,这是我的第一个 react-native 项目)
谢谢!
应用程序.js
import React from 'react';
import * as firebase from 'firebase';
import {StackNavigator} from "react-navigation";
import Login from './src/components/Login/Login';
import Welcome from "./src/components/Welcome";
export const AppNavigator = StackNavigator({
Login: {screen: Login},
Welcome: {screen: Welcome},
});
//initialize Firebase
const firebaseConfig = {
apiKey: "************************************",
authDomain: "firstproject-r.firebaseapp.com",
databaseURL: "https://firstproject-r.firebaseio.com",
projectId: "firstproject-r",
storageBucket: "",
messagingSenderId: "************"
};
firebase.initializeApp(firebaseConfig);
class App extends React.Component {
render() {
return (
<AppNavigator/>
);
}
}
export default App;
登录.js
import React from 'react';
import {StyleSheet, View, Image, Text, KeyboardAvoidingView, StatusBar}
from 'react-native';
import LoginForm from "./LoginForm";
class Login extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<KeyboardAvoidingView behavior='padding' style=
{styles.container}>
<View style={styles.logoContainer}>
<StatusBar barStyle="light-content"/>
<Image
style={styles.logo}
source=
{require('../../images/EquipRentIcon.png')}>
</Image>
<Text style={styles.title}>idostuff</Text>
</View>
<View style={styles.formContainer}/>
<LoginForm/>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#3498db',
},
logo: {
width: 160,
height: 160
},
logoContainer: {
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
title: {
color: '#FFF',
fontSize: 20,
justifyContent: 'center'
},
formContainer: {}
});
export default Login;
loginForm.js
import React from 'react';
import {StyleSheet, Text, View, TextInput, TouchableOpacity, StatusBar} from 'react-native';
import firebase from 'firebase';
// const auth = firebase.auth();
// const fbProvidor = new firebase.auth.FacebookAuthProvider();
// const googProvidor = new firebase.auth.GoogleAuthProvider();
class LoginForm extends React.Component {
constructor(props) {
super(props)
this.submit = this.submit.bind(this);
this.loginUser = this.loginUser.bind(this);
this.createUser = this.createUser.bind(this);
this.state = ({
email: '',
password: '',
navigation: this.props.navigation
})
}
loginUser = (email, password, ) => {
try {
if (this.state.password.length < 6) {
alert("Please enter at least 6 characters")
return;
}
firebase.auth().signInWithEmailAndPassword(email, password).then(function (user) {
console.log(user)
});
this.submit()
}
catch (error) {
console.log(error.toString())
}
};
createUser = (email, password) => {
try {
if (this.state.password.length < 6) {
alert("Please enter at least 6 characters")
return;
}
firebase.auth().createUserWithEmailAndPassword(email, password).then(function () {
});
this.submit()
}
catch (error) {
console.log(error.toString())
}
};
submit() {
this.props.navigation.navigate('Welcome');
}
render() {
return (
<View style={styles.container}>
<StatusBar barStyle="light-content"/>
<TextInput
style={styles.input}
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
placeholder="username"
onSubmitEditing={() => this.passwordInput.focus()}
onChangeText={(email) => this.setState({email})}
placeholderTextColor="rgba(255, 255, 255, 0.7)">
</TextInput>
<TextInput
style={styles.input}
placeholder="password"
secureTextEntry
returnKeyType="go"
ref={(input) => this.passwordInput = input}
onChangeText={(password) => this.setState({password})}
placeholderTextColor="rgba(255, 255, 255, 0.7)">
</TextInput>
<TouchableOpacity
style={styles.loginButtonContainer}
onPress={() => {
this.loginUser(this.state.email, this.state.password)
}}
>
<Text style={styles.loginButtonText}>
Login
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupButtonContainer}
onPress={() => {
this.createUser(this.state.email, this.state.password)
}}
>
<Text style={styles.signUpButtonText}>
Sign Up
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
height: 40,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
marginBottom: 15,
fontSize: 20,
paddingHorizontal: 10
},
loginButtonContainer: {
backgroundColor: '#2980b9',
padding: 15,
justifyContent: 'center'
},
signupButtonContainer: {
backgroundColor: 'white',
opacity: .3,
marginTop: 10,
padding: 15,
justifyContent: 'center'
},
loginButtonText: {
textAlign: 'center',
color: 'white',
fontSize: 20,
fontWeight: '700'
},
signUpButtonText: {
textAlign: 'center',
color: 'black',
fontSize: 20,
fontWeight: '700'
}
});
export default LoginForm;
欢迎.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class Welcome extends React.Component{
render() {
const { navigate } = this.props.navigation;
return (
<Text>
this is the welcome screen
</Text>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#3498db',
},
});
export default Welcome;