[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,
email
};
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 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
随机推荐
- ZJOI2010网络扩容
无限orz hzwer神牛…… 第一问很简单,按数据建图,然后一遍最大流算法即可. 第二问则需要用最小费用最大流算法,主要是建图,那么可以从第一问的残留网络上继续建图,对残留网络上的每一条边建 ...
- I.MX6 android 移除shutdown功能
/************************************************************************ * I.MX6 android 移除shutdown ...
- HDU 1503 Advanced Fruits (LCS,变形)
题意: 给两个水果名,要求他们的LCS部分只输出1次,其他照常输出,但是必须保持原来的顺序! 思路: 求LCS是常规的,但是输出麻烦了,要先求LCS,再标记两串中的所有LCS字符,在遇到LCS字符时, ...
- C#生成缩略图代码
/**//// <summary> /// 生成缩略图 /// </summary> /// <param name=&q ...
- 编译驱动时出现"Cannot open file trace.h"错误
编译驱动时出现"Cannot open file trace.h"错误 如题,用VS2013编译驱动是出现上述错误,原来是开启了WPP追踪导致的: 解决方案: 右键项目名-属性-W ...
- STM32使用以下规则对过滤器编号:
STM32使用以下规则对过滤器编号:(1) FIFO_0和 FIFO_1的过滤器分别独立编号,均从0开始按顺序编号.(2) 所有关联同一个 FIFO 的过滤器,不管有没有被激活,均统一进行编号.(3) ...
- 动态代理CGlib实例
1.委托类: package 动态代理2; //需要对这个类进行增强 public class UserService { public void create() { System.out.prin ...
- bzoj 1833 [ZJOI2010]count 数字计数(数位DP)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1833 [题意] 统计[a,b]区间内各数位出现的次数. [思路] 设f[i][j][k ...
- 【暑假】[深入动态规划]UVa 10618 Fixing the Great Wall
UVa 10618 Fixing the Great Wall 题目: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=361 ...
- uvalive 4513 Stammering Aliens
题意:给你一个串,问期中至少出现m次的最长子串及其起始位置的坐标. 思路:hash+LCP+二分答案 #include<cstdio> #include<cstring> #i ...