Expo大作战(十六)--expo结合firebase 一个nosql数据库（本章令我惊讶但又失望！）

678 0 0

作者:鸟窝

简要：本系列文章讲会对expo进行全面的介绍，本人从2017年6月份接触expo以来，对expo的研究断断续续，一路走来将近10个月，废话不多说，接下来你看到内容，讲全部来与官网

我猜去全部机翻+个人修改补充+demo测试的形式，对expo进行一次大补血！欢迎加入expo兴趣学习交流群：597732981

【之前我写过一些列关于expo和rn入门配置的东i西，大家可以点击这里查看：从零学习rn开发】

相关文章：

Expo大作战(一)--什么是expo，如何安装expo clinet和xde，xde如何使用

Expo大作战(二)--expo的生命周期，expo社区交流方式，expo学习必备资源，开发使用expo时关注的一些问题

Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等

Expo大作战(四)--快速用expo构建一个app，expo中的关键术语

Expo大作战(五)--expo中app.json 文件的配置信息

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

Expo大作战(七)--expo如何使用Genymotion模拟器

Expo大作战(八)--expo中的publish以及expo中的link，对link这块东西没有详细看，大家可以来和我交流

更多>>

接下来就开始撸码

使用Firebase

Firebase数据库是一款流行的NoSQL云数据库，它允许开发人员实时同步实时数据。通过多平台支持，在用户和客户端之间同步数据是非常无缝的，但如果您不关心实时更新，它也可以更普遍地用作通用持久性NoSQL数据支持。它具有非常灵活的规则语法，可以对数据访问进行微小的控制。

幸运的是，从3.1+版本开始的Firebase JavaScript SDK几乎全面支持React Native，因此将其添加到我们的expo应用程序中非常简单。本指南后面介绍的一点是，通常由Firebase SDK提供的用户登录组件不适用于React Native，因此我们必须解决它。

有关更多一般信息，请参阅firebase.google.com/docs/database，并且官方Firebase博客文章宣布React Native兼容性

注意：本指南仅涵盖Firebase实时数据库，并不包含Google Firebase规模较大的其他服务。 Firebase云存储目前不受支持，但我们正在努力将Blob实现上行到React Native，从而使其成为可能。有关为什么不支持其他Firebase服务的更多背景信息，请阅读Brent Vatne对Canny的回复

1. Firebase SDK设置

首先，我们需要设置Firebase帐户并创建一个新项目。我们将使用Firebase提供的JavaScript SDK，将其纳入您的expo项目。

npm install --save firebase

Firebase控制台会为您提供一个API密钥以及您的项目初始化所需的其他标识符。 firebase-web-start详细描述了每个字段在控制台中的含义以及在哪里可以找到它们。
import * as firebase from 'firebase';

// Initialize Firebase
const firebaseConfig = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  storageBucket: "<YOUR-STORAGE-BUCKET>"
};

firebase.initializeApp(firebaseConfig);
临时绕过默认安全规则（Temporarily Bypass Default Security Rules）

默认情况下，Firebase数据库具有安全规则设置，以便所有访问您数据的设备都必须通过身份验证。我们显然还没有设置任何身份验证，所以我们现在可以在我们设置应用程序的其余部分时禁用它。

进入Firebase的数据库控制台，在“规则”选项卡下，您应该看到已经为您提供的一组默认规则。将规则更改为：
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
请参阅示例Firebase规则以获取适用于您的数据的良好规则集，包括未经身份验证的规则。

注意重要的是要注意，这对于开发来说是暂时的，在发布应用程序之前应对这些规则进行彻底评估。

2.存储数据和接收更新

通过Firebase存储数据可能非常简单。想象一下，我们正在创建一个高分存储在Firebase中供所有人查看的游戏。我们可以在每个用户引用的数据中创建一个用户存储桶。设置他们的高分将是直截了当的。
function storeHighScore(userId, score) {
  firebase.database().ref('users/' + userId).set({
    highscore: score
  });
}
现在让我们假设我们希望另一个客户端收听特定用户的高分的更新。借助Firebase，我们可以针对特定的数据引用设置侦听器，并在每次更新数据时收到通知。在下面的示例中，每次为给定用户更新高分时，它都会将其打印到控制台。
setupHighscoreListener(userId) {
  firebase.database().ref('users/' + userId).on('value', (snapshot) => {
    const highscore = snapshot.val().highscore;
    console.log("New high score: " + highscore);
  });
}
用户认证

这非常简单，而且Firebase JavaScript SDK提供的功能相当不错。但有一点需要注意。我们在开始时简化了验证规则。 Firebase SDK为开发人员提供了身份验证方法，因此他们不必重新实现通用登录系统，例如Google或Facebook登录。

这包括Firebase的Web，Android和iOS SDK版本中的UI元素，但是，这些UI组件不适用于React Native，因此不应调用。值得庆幸的是，由于我们自己提供用户身份验证，Firebase为我们提供了验证数据访问的方法。

登录方法

我们可以选择对我们的应用程序有意义的不同登录方法。登录方法选择与Firebase数据库访问权限正交，但是，我们需要让Firebase知道我们如何设置我们的登录系统，以便它可以正确分配与我们的用户帐户匹配的身份验证令牌以进行数据访问控制。你可以使用任何你想要的东西，推出你自己的定制登录系统，或者如果你的所有用户都可以不受限制的访问，甚至可以放弃它。

Facebook登入

许多开发人员选择的通用登录系统是用户已熟悉的简单Facebook登录。expo已经提供了一个伟大的Facebook登录组件，所以我们只需要插入即可。

有关如何设置这些信息，请参阅我们文档的Facebook部分。这与Google和其他人一样合适。

将登录提供商与Firebase绑定

一旦您将Facebook登录添加到您的expo用程序中，我们需要调整Firebase控制台进行检查。在登录方法选项卡中的控制台的身份验证部分下，启用Facebook作为登录提供程序。
{
  "rules": {
    "users": {
      "$uid": {
        ".read": true,
        ".write": "$uid === auth.uid"
      }
    }
  }
}
监听身份验证
我们现在准备将Facebook登录代码与我们的Firebase数据库实现连接起来。
firebase.initializeApp(config);

// Listen for authentication state to change.
firebase.auth().onAuthStateChanged((user) => {
  if (user != null) {
    console.log("We are authenticated now!");
  }

  // Do other things
});

async function loginWithFacebook() {
  const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync(
    '<APP_ID>',
    { permissions: ['public_profile'] }
  );

  if (type === 'success') {
    // Build Firebase credential with the Facebook access token.
    const credential = firebase.auth.FacebookAuthProvider.credential(token);

    // Sign in with credential from the Facebook user.
    firebase.auth().signInWithCredential(credential).catch((error) => {
      // Handle Errors here.
    });
  }
}
Facebook登录方法与您在Facebook登录指南中看到的方法类似，但是，我们从成功登录中收到的令牌可以传递给Firebase SDK，以通过firebase.auth.FacebookAuthProvider.credential向我们提供Firebase凭据。然后，我们可以通过firebase.auth（）。signInWithCredential使用此凭据进行登录。

firebase.auth()。onAuthStateChanged事件允许我们在认证状态发生变化时设置监听器，因此在我们的情况下，当使用Facebook凭证成功登录Firebase时，我们会得到一个可以使用的用户对象用于验证数据访问。

经过身份验证的数据更新

既然我们有一个用于我们认证用户的用户对象，我们可以调整我们以前的storeHighScore（）方法来使用用户对象的uid作为我们的用户参考。由于user.uid是由Firebase自动为经过身份验证的用户生成的，因此这是引用用户存储区的好方法。
function storeHighScore(user, score) {
  if (user != null) {
    firebase.database().ref('users/' + user.uid).set({
      highscore: score
    });
  }
}
下一张继续介绍，这一篇主要介绍了：expo结合firebase 一个nosql数据库（本章令我惊讶但又失望！）， 欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！