在每一個應(yīng)用程序中，你都會看到幾種身份驗(yàn)證，比如使用Facebook、Google等進(jìn)行登錄，但人們還是喜歡輸入電子郵件和密碼。在本教程中，我們將把電子郵件身份驗(yàn)證與React native和Firebase集成在一起。使用firebase使其更易于使用。讓我告訴你怎么做？

通過Expo創(chuàng)建新項目

我們不會使用react native cli，而是使用Expo。這將使我們的任務(wù)更容易一點(diǎn)。因?yàn)槭褂胷eact native cli，我們至少需要安裝XCode或androidstudio來運(yùn)行和測試應(yīng)用程序。

https://media.com/media/18214d8333adbb5668f31791a3202b60/href

要使用Expo制作應(yīng)用程序，您需要鍵入terminal或CMD:

expo init react native firebase

按下Enter鍵后，安裝開始。安裝完成后，使用VS Code打開項目。

要運(yùn)行該應(yīng)用程序，您需要使用cd app-folder-name進(jìn)入它，然后運(yùn)行命令yarn start。

一旦你運(yùn)行了這個應(yīng)用程序，Expo將打開一個新的瀏覽器窗口。

你可以看到很多可以運(yùn)行Android和iOS模擬器以及QR碼的選項。這里我們使用iOS模擬器來運(yùn)行這個應(yīng)用程序。然后打開模擬器或使用你的設(shè)備打開Expo應(yīng)用程序。

您將看到如下屏幕：

如果一切正常，我們就可以出發(fā)了。讓我們開始真正的編碼：

使用本地基礎(chǔ)的快速形成引導(dǎo)

為了快速開發(fā)我們的界面，我們使用Nativebase進(jìn)行開發(fā)。

要安裝native base，請打開一個新終端并運(yùn)行以下命令：

npm i native-base -s

不要擔(dān)心在進(jìn)行本地基礎(chǔ)安裝過程中是否會出現(xiàn)一些錯誤。停止expo并再次運(yùn)行npm安裝。

我們將返回正常模式

帶有本地基本組件的安裝表格

現(xiàn)在，我們已經(jīng)準(zhǔn)備好將必要的Nativebase組件導(dǎo)入到APP.js

import { Container, Item, Form, Input, Button, Label } from "native-base";

導(dǎo)入后，我們將為前端窗體構(gòu)建一個用戶界面。

render() {
**return** (
 <Container>
 <Form>
 <Item floatingLabel>
 <Label>Email</Label>
 <Input autoCapitalize="none" autoCorrect={false} />
 </Item>
 <Item floatingLabel>
 <Label>Password</Label>
 <Input
 secureTextEntry={true}
 autoCapitalize="none"
 autoCorrect={false}
 />
 </Item>
 <Button full rounded>
 <Text>SignIn</Text>
 </Button>
 </Form>
 </Container>
 );
 }

一旦你保存了上面顯示的代碼，然后你就可以在屏幕上看到即時結(jié)果。這個概念也被稱為熱重新加載。

所以讓我們把窗體居中對齊。為此，我們將使用樣式表屬性。只要看看下面的代碼，您就可以很容易地理解我們正在用容器處理樣式表中的屬性。

<Container style={styles.container}>

只需在樣式中添加注釋，我們就可以使其成為中心。

**const** styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: "#fff",
 // alignItems: "center",
 justifyContent: "center"
 }
});

現(xiàn)在保存代碼并查看結(jié)果。所有部件居中對齊。太棒了，讓我們繼續(xù)下一步：

將Firebase添加到React本機(jī)項目

要添加firebase，我們需要在App.js上運(yùn)行命令npm i firebase --save和after import firebase，如下所示：

import * as firebase from "firebase";

下一步是創(chuàng)建firebase項目。轉(zhuǎn)到firebase控制臺，創(chuàng)建項目查找apikey和配置，如下圖所示：

抓取配置并粘貼到APP.js如下圖所示：

import * as firebase from "firebase";
import { Container, Item, Form, Input, Button, Label } from "native-base";

var config = {
 apiKey: "AIzaSyDFdsjQWG8IFLXmviNqSiVZMw_ADFl5tpo",
 authDomain: "react-native-firebase-3bde9.firebaseapp.com",
 databaseURL: "https://react-native-firebase-3bde9.firebaseio.com",
 projectId: "react-native-firebase-3bde9",
 storageBucket: "react-native-firebase-3bde9.appspot.com",
 messagingSenderId: "269398778466"
};

firebase.initializeApp(config);

最后，我們成功地將firebase tp添加到了我們的項目中。

注冊

對于電子郵件身份驗(yàn)證，我們需要在Firebase控制臺上激活電子郵件身份驗(yàn)證。轉(zhuǎn)到firebase控制臺并啟用它。

再次回到VS Code并添加一個注冊按鈕。以便用戶填寫信息。

<Button full rounded success style={{ marginTop: 20 }}> <Text>Signup</Text>
</Button>

添加按鈕后，您將能夠通過Signin和signup按鈕看到此結(jié)果。

讓我們?yōu)樽园粹o編寫一點(diǎn)代碼。你可以跟著我走。如果你這樣做，很少有機(jī)會犯錯誤并看到任何類型的錯誤。

export default class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 email: "",
 password: ""
 };
 }
 SignUp = (email, password) => {
 try {
 firebase.auth().createUserWithEmailAndPassword(email, password);
 } catch (error) {
 console.log(error.toString(error));
 }
 };

現(xiàn)在，我們創(chuàng)建一個狀態(tài)來處理表單中的電子郵件和密碼，并創(chuàng)建用于處理firebase代碼的注冊函數(shù)。

下一步是用onChangeText向state添加表單值。

<Item floatingLabel>
 <Label>Email</Label>
 <Input
 autoCapitalize="none"
 autoCorrect={false}
 onChangeText={email => this.setState({ email })}
 />
 </Item>
 <Item floatingLabel>
 <Label>Password</Label>
 <Input
 secureTextEntry={true}
 autoCapitalize="none"
 autoCorrect={false}
 onChangeText={password => this.setState({ password })}
 />

我們將使用注冊按鈕的onPress事件觸發(fā)注冊功能。

onPress={() => this.SignUp(this.state.email, this.state.password)}

讓我們試著保存并提交表單，以測試我們是否朝著正確的方向前進(jìn)。

進(jìn)入并點(diǎn)擊注冊后，轉(zhuǎn)到firebase控制臺。查看firebase數(shù)據(jù)庫，您可以看到我們輸入的值。

現(xiàn)在我們已經(jīng)成功地向Firebase添加了一個新用戶。

登錄

讓我們?yōu)榈卿洶粹o編碼。我們使用了來自注冊方法的代碼，并對firebase函數(shù)進(jìn)行了一些修改。這樣我們才能達(dá)到我們想要的。

SignIn = (email, password) => {
**try** {
 firebase.auth().signInWithEmailAndPassword(email, password);
 firebase.auth().onAuthStateChanged(user => {
 alert(user.email);
 })

} **catch** (error) {
 console.log(error.toString(error));
 }
 };

接下來，使用onAuthStateChanged從firebase獲取用戶數(shù)據(jù)。所以，如果我們按下這個按鈕，一個onPress甚至?xí)艚蠸ignIn，它會檢查電子郵件和密碼是否正確。

onPress={() => this.SignIn(this.state.email, this.state.password)}

所以讓我們試著登錄。

它起作用了。最后，我們做到了。你可以看到一切都很好。

結(jié)論

我們使用了Expo，Nativebase，F(xiàn)irebase。我希望你已經(jīng)學(xué)會了。如果你覺得值得，繼續(xù)分享。