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

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

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

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

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

expo init react native firebase

按下Enter鍵后，安裝開(kāi)始。安裝完成后，使用VS Code打開(kāi)項(xiàng)目。

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

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

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

您將看到如下屏幕：

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

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

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

要安裝native base，請(qǐng)打開(kāi)一個(gè)新終端并運(yùn)行以下命令：

npm i native-base -s

不要擔(dān)心在進(jìn)行本地基礎(chǔ)安裝過(guò)程中是否會(huì)出現(xiàn)一些錯(cuò)誤。停止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)建一個(gè)用戶(hù)界面。

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>
 );
 }

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

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

<Container style={styles.container}>

只需在樣式中添加注釋?zhuān)覀兙涂梢允蛊涑蔀橹行摹?br>

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

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

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

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

import * as firebase from "firebase";

下一步是創(chuàng)建firebase項(xiàng)目。轉(zhuǎn)到firebase控制臺(tái)，創(chuàng)建項(xià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添加到了我們的項(xiàng)目中。

注冊(cè)

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

再次回到VS Code并添加一個(gè)注冊(cè)按鈕。以便用戶(hù)填寫(xiě)信息。

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

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

讓我們?yōu)樽?cè)按鈕編寫(xiě)一點(diǎn)代碼。你可以跟著我走。如果你這樣做，很少有機(jī)會(huì)犯錯(cuò)誤并看到任何類(lèi)型的錯(cuò)誤。

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)建一個(gè)狀態(tài)來(lái)處理表單中的電子郵件和密碼，并創(chuàng)建用于處理firebase代碼的注冊(cè)函數(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 })}
 />

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

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

讓我們?cè)囍４娌⑻峤槐韱危詼y(cè)試我們是否朝著正確的方向前進(jìn)。

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

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

登錄

讓我們?yōu)榈卿洶粹o編碼。我們使用了來(lái)自注冊(cè)方法的代碼，并對(duì)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));
 }
 };

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

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

所以讓我們?cè)囍卿洝?/span>

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

結(jié)論

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