[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 [leetcode 13] Roman to Integer
问题描述: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range fr ...
- insert /*+APPEND*/ 各种insert 插入速度比较
SQL> select count(*) from t;COUNT(*)----------5442048****************************SQL> alter ta ...
- OpenGL学习之路(五)
1 引子 不知不觉我们已经进入到读书笔记(五)了,我们先对前四次读书笔记做一个总结.前四次读书笔记主要是学习了如何使用OpenGL来绘制几何图形(包括二维几何体和三维几何体),并学习了平移.旋转.缩放 ...
- Google Maps API v2 Demo Tutorial
申请API KEY https://code.google.com/apis/console/?noredirect 1. 创建项目,名称随意,只是为了区分 2. 开启Google Maps Andr ...
- WPF学习笔记 - 在XAML里绑定
Binding除了默认构造函数外,还有一个可以传入Path的构造函数,下面两种方式实现的功能是一样的. <TextBlock x:Name="currentFolder" D ...
- 转载--PHP json_encode() 和json_decode()函数介绍
转自:http://www.nowamagic.net/php/php_FunctionJsonEncode.php 转自:http://www.jb51.net/article/30489.htm ...
- js基础第3天
仿淘宝搜索框案例(有价值) 判断用户输入事件 正常浏览器:oninput(判断用户输入) ie678浏览器兼容:onpropertychange(因为兼容性问题, ie浏览器678是需要使用这个来判断 ...
- 【译】 AWK教程指南 附录E-正则表达式
为什么要使用正则表达式 UNIX 中提供了许多 指令 和 tools,它们具有在文件中 查找(Search)字串或替换(Replace)字串 的功能.像 grep, vi , sed, awk,... ...
- git和repo入门
版本控制 版本控制是什么已不用在说了,就是记录我们对文件.目录或工程等的修改历史,方便查看更改历史,备份以便恢复以前的版本,多人协作... 一.原始版本控制 最原始的版本控制是纯手工的版本控制:修改文 ...
- VIJOS-P1340 拯救ice-cream(广搜+优先级队列)
题意:从s到m的最短时间.(“o"不能走,‘#’走一个花两个单位时间,‘.'走一个花一个单位时间) 思路:广搜和优先队列. #include <stdio.h> #include ...