[React Native + Firebase] React Native: Real time database with Firebase -- setup & CRUD
Install:
npm i --save firebase // v3.2.1
Config Firebase:
First we need to require Firebase:
import firebase from 'firebase';
Then in the component constructor, we need to init Firebase:
constructor(props){
super(props);
// Initialize Firebase
var config = {
apiKey: "<api_key>",
authDomain: "<authDomain>",
databaseURL: "<databaseURL>",
storageBucket: "<storageBucket>",
};
firebase.initializeApp(config);
}
The config you can easily get from the your Firebase App page.
Create new node: set()
writeUserData(userId, name, email, imageUrl) {
firebase.database().ref('users/' + userId).set({
username: name,
email: email,
profile_picture : imageUrl
});
} // calling
this.writeUserData(, "Zhentian Wan", 'answer881215@gmail.com', null);
Then one node will be created in the "users" node, uid is "1".
Create new Child node: push()
appendOneMoreUser(name, email, imageUrl){
let ref = firebase.database().ref().child('users').push({
username: name,
email: email
});
this.updateMe("Yoona", "yoona.only@gmail.com", ref.key);
} // calling
this.appendOneMoreUser("Yuri", 'yuri.only@gmail.com', null);
So under "users" node, we want to append one new node, the uid will be generated randomly.
The "ref" object contains "key" prop which ref to the uid in the database.
Update one node: update()
updateMe(name, email, key){
const update = {
username: name,
};
let ref = firebase.database().ref('users/' + key).update(update)
.then((res)=>{
console.log("Data has been updated ");
});
} // calling:
const ref = firsebase.database().ref().child('users').push(user);
this.updateMe("Yoona", "yoona.only@gmail.com", ref.key);
update() and set() methods both return Promise. So you can chaining .then() onto it.
Delete node: remove()
deleteMe(){
firebase.database().ref('users/1').remove();
}
Delete the uid = 1 user.
[React Native + Firebase] React Native: Real time database with Firebase -- setup & CRUD的更多相关文章
- Native VS React Native VS 微信小程序
随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那 ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- WHAT IS THE DIFFERENCE BETWEEN REACT.JS AND REACT NATIVE?
Amit Ashwini - 09 SEPTEMBER 2017 React.js was developed by Facebook to address its need for a dynami ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- React源码 React.Component
React中最重要的就是组件,写的更多的组件都是继承至 React.Component .大部分同学可能都会认为 Component 这个base class 给我们提供了各种各样的功能.他帮助我们去 ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
随机推荐
- 新功能:Azure 负载平衡器的空闲超时现可配置了
Yves Pitsch Azure 网络首席项目经理 我们很高兴地宣布,Azure负载平衡器现在可以为云服务和虚拟机提供可配置的 TCP空闲超时支持.要配置此功能,可以使用服务管理 API.Power ...
- tomcat server.xml配置详解
由于 Tomcat 基于 Java,实际上在各种 Linux 发行版里的配置方法都大同小异,只是我看见在 Arch Linux 环境里搭建 Tomcat 的文章比较少,所以在 Arch Linux 实 ...
- 导出Excel帮助类
using System; using System.Collections.Generic; using System.Text; using System.Data; using System.D ...
- 在MFC[转载]在MFC状态栏显示时间 状态栏显示时间
原文:在MFC状态栏显示时间,谢小哈皮儿 c/c++ vc 在mfc状态栏显示时间,在VC的控件中有个Status bar可以在窗体状态栏中添加日期和时间.其实通过简单的代码,你就能创建一个有时钟显示 ...
- NGINX(三)HASH表
前言 nginx的hash表有几种不同的种类, 不过都是以ngx_hash_t为基础的, ngx_hash_t是最普通的hash表, 冲突采用的是链地址法, 不过这里冲突的元素不是一个链表, 而是一个 ...
- 3、Android应用程序签名及发布
一.问个问题,为何我们需要签名以及版本控制? 程序做好了,我们要放到Market上进行商业发布. 二.发布步骤 [准备发布] 1)移除log , 设置版本编号和名称. 2)签名,通过ADT工具. 3) ...
- tomcat Connector 连接器
连接器的核心功能,本文去除非核心功能,留下整个程序的框架,便于理解. 1.接受连接请求 2.创建request,和response. 3.调用容器对应的Invoke方法, 首先看类的依赖结构. 1.C ...
- BNUOJ-15505 Largest Rectangle in a Histogram DP
题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=15505 每个h[i]维护两个值l[i]和r[i],分别表示大于h[i]的左边最远距离和小于 ...
- POJ-3714 Raid 平面最近点对
题目链接:http://poj.org/problem?id=3714 分治算法修改该为两个点集的情况就可以了,加一个标记... //STATUS:C++_AC_2094MS_4880KB #incl ...
- Adding an On/Off switch to your Raspberry Pi
http://www.raspberry-pi-geek.com/Archive/2013/01/Adding-an-On-Off-switch-to-your-Raspberry-Pi#articl ...