简要:本系列文章讲会对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数据库(本章令我惊讶但又失望!), 欢迎大家关注我的微信公众号,这篇文章是否被大家认可,我的衡量标准就是公众号粉丝增长人数。欢迎大家转载,但必须保留本人博客链接!

Expo大作战(十六)--expo结合firebase 一个nosql数据库(本章令我惊讶但又失望!)的更多相关文章

  1. Expo大作战(十九)--expo打包后,发布分用程序到商店的注意事项

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

  2. Expo大作战(十八)--expo如何发布成独立应用程序,打包成apk或者ipa,发布到对应应用商店

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

  3. Expo大作战(十五)--expo中splash启动页的详细机制

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

  4. Expo大作战(十四)--expo中消息推送的实现

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

  5. Expo大作战(十二)--expo中的自定义样式Custom font,以及expo中的路由Route&Navigation

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

  6. Expo大作战(十)--expo中的App Icon,expo中的Assets,expo中的ErrorHandling错误处理

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

  7. Expo大作战(三十七)--expo sdk api之 GLView,GestureHandler,Font,Fingerprint,DeviceMotion,Brightness

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

  8. Expo大作战(三十三)--expo sdk api之MapView(地图),MailComposer(磁力传感计),Lottie(动画)

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

  9. Expo大作战(三十一)--expo sdk api之Payments(expo中的支付),翻译这篇文章傻逼了,完全不符合国内用户,我只负责翻译大家可以略过!

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

随机推荐

  1. npm 安装 cannot find module

    window7安装module出现 Connot find module 'xxx' 解决办法: 添加环境变量命名为:NODE_PATH 设置值为:%AppData%\npm\node_modules ...

  2. php数组方法

    查找.筛选与搜索数组元素是数组操作的一些常见功能.下面来介绍一下几个相关的函数. in_array()函数 in_array()函数在一个数组汇总搜索一个特定值,如果找到这个值返回true,否则返回f ...

  3. 全网最详细的CentOS7里安装MySQL时出现No package mysql-server available错误的解决办法(图文详解)

    不多说,直接上干货! 直接yum install mysql的话会报错,原因在于yum安装库里没有直接可以用的安装包,此时需要用到MariaDB了,MariaDB是MySQL社区开发的分支,也是一个增 ...

  4. PHP之高性能I/O框架:Libevent(一)

    Libevent 是一个用C语言编写的.轻量级的开源高性能I/O框架,支持多种 I/O 多路复用技术: epoll. poll. dev/poll. select 和 kqueue 等:支持 I/O, ...

  5. 使用XHProf分析PHP性能瓶颈(一)

    安装xhprof扩展 wget http://pecl.php.net/get/xhprof-0.9.4.tgz tar zxf xhprof-0.9.4.tgz cd xhprof-0.9.4/ex ...

  6. Spring Boot使用Shiro实现登录授权认证

    1.Shiro是Apache下的一个开源项目,我们称之为Apache Shiro.它是一个很易用与Java项目的的安全框架,提供了认证.授权.加密.会话管理,与spring Security 一样都是 ...

  7. How to correctly handle ThreadLocal.get() returning null

    Java's ThreadLocals make certain things easy, but special care must be taken to make sure they are r ...

  8. 【转】kafka集群搭建

    转:http://www.cnblogs.com/luotianshuai/p/5206662.html Kafka初识 1.Kafka使用背景 在我们大量使用分布式数据库.分布式计算集群的时候,是否 ...

  9. 微信小程序——动态渲染页面、路径传参

      1.动态渲染页面.改变css.样式必须setData渲染过去   this.setData({ userInfo: app.globalData.userInfo, token: app.glob ...

  10. 复刻smartbits的国产网络测试工具minismb-如何测试DPI引擎

    复刻smartbits的网络性能测试工具MiniSMB,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太网测试工具测试任何ip网络设备的端口吞吐率,带宽,并发 ...