[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 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
随机推荐
- @深入注解,在Java中设计和使用自己的注解
我们用过 JDK给我们提供的 @Override @Deprecated @SuppressWarning 注解 ,这些注解是JDK给我们提供的 ,我们只是在用别人写好的东西 ,那么我们是否可以 ...
- UVa 10213 (欧拉公式+Java大数) How Many Pieces of Land ?
题意: 一块圆形土地,在圆周上选n个点,然后两两连线,问把这块土地分成多少块? 分析: 首先紫书上的公式是错的,不过根据书上提供的思路很容易稍加修改得到正确答案! 然后推公式吧,这里用到平面图的欧拉公 ...
- 让Codeigniter控制器支持多级目录
<?php if (!defined('BASEPATH')) { exit ('No direct script access allowed');} class MY_Router exte ...
- Java序列化 如何把多个对象存储在一个文件中
/** * 用于保存模板文件,内容包括: * 1,标志位,1 int * 2,版本 1 int * 3,数据头长度 1 int * 4,预留数据头空间 5120 byte * 5,后续数据长度 ...
- 发送复杂的HTTP GET请求并且取回响应。
设计思想: 创建一个HttpWebRequest类的实例,并通过GetReponse()方法取回响应的HTTP响应. 实例方案: string url="http://www.baidu.c ...
- JSON 格式的转换: 数组、字符串、List集合、DataTable,实体对象
JSON验证工具:http://jsonlint.com/JSON简明教程:http://www.w3school.com.cn/json/Newtonsoft.Json类库下载:http://jso ...
- js会飞的li标签
当点击左边的li标签的时候,这边的li标签飞到右边去,点击右边的li标签飞到左边来,并且有顺序 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 第二个App“今日美文”上架【原】
App store 下载地址 开发这个App的本意 之前偶然找到一个叫<每日一文>的应用,正是我一直想找的,优点如下: 界面够简单 推荐的文章也很好,而且都不太长 每天都不一样 但是用起来 ...
- 使用GitHub进行团队协作
当进行团队协作完成一个项目时,GitHub是个不错的选择.下面是记录我和朋友做项目的时候协作的方法. 首先下载Github for windows 客户端,http://windows.github. ...
- A Tour of Go Exercise: Slices
Implement Pic. It should return a slice of length dy, each element of which is a slice of dx 8-bit u ...