Мне нужно было очень простое мобильное приложение, чтобы показать мои тренировки. В основном это список с упражнениями, повторениями и заметками.

Я беру свой телефон в спортзал, но все свои исследования, чтобы собрать распорядок, провожу на своем ноутбуке. Итак, я создал собственное приложение для реагирования, которое слушает базу данных Firebase в реальном времени. Затем для каждой тренировки я использую curl для загрузки файла JSON в Firebase, и приложение мгновенно обновляется.

Вот шаги:

Реагировать на родной

Установите response native для вашей ОС отсюда: https://facebook.github.io/react-native/releases/next/docs/getting-started.html

Выполните следующие команды, чтобы создать приложение, поддерживающее реакцию:

react-native init Workout
cd Workout

Конфигурация Firebase

Перейдите на https://firebase.google.com/ и выберите НАЧАТЬ БЕСПЛАТНО. (Возможно, вам потребуется создать учетную запись Google, не большая). Затем выберите СОЗДАТЬ НОВЫЙ ПРОЕКТ. Дайте вашему проекту имя и на следующей странице выберите Добавить Firebase в ваше веб-приложение. Должен появиться javascript, необходимый для настройки Firebase:

Скопируйте javascript из всплывающего окна. Вам нужно будет опустить теги ‹script›.

Собираем их вместе

Код приложения находится на гитхабе. Вам нужно будет заменить код конфигурации Firebase на приведенный выше код. firebaseconfig.js - это файл для редактирования, он должен выглядеть так:

import * as firebase from 'firebase';
var config = {
    apiKey: "Your apiKey",
    authDomain: "Your authDomain",
    databaseURL: "Your databaseURL",
    storageBucket: "Your storageBucket"
};
firebase.initializeApp(config);
var firebaseDbh = firebase.database();
module.exports = firebaseDbh;

Основа приложения

Это приложение настолько простое, что я сохранил почти все в одном файле. Самая интересная часть - заставить приложение «слушать» базу данных Firebase в реальном времени. Давайте копаться:

class Workout extends Component {
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({
                  rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {loading: true, 
               dbh: firebaseDbh, dataSource: ds};
    }

Конструктор создает источник данных listview. Источник данных и дескриптор данных Firebase добавляются в состояние класса для дальнейшего использования.

componentDidMount() {
       // connect to a Firebase table
        var dbref = this.state.dbh.ref('workout/warmup');
       // save database reference for later
        this.setState ( {dbulref: dbref});
       // meat: this is where it all happens
        dbref.on('value', (e) => {
            var rows = [];
            if ( e && e.val() && e.val().map ) {
                e.val().map((v) => rows.push ( v ));
            }
            var ds = this.state.dataSource.cloneWithRows(rows);
            this.setState({
                dataSource: ds,
                loading: false
            });
        });
    }

Используя дескриптор базы данных, создайте ссылку, которая «слушает» конкретную таблицу Firebase в реальном времени. Это приложение прослушивает «тренировку / разминку», которая будет файлом JSON в определенном формате, который приложение может понять.

Дальше все происходит: dbref.on (‘value’,… ..). Здесь мы просим Firebase сообщать нам, когда «тренировка / разминка» была обновлена. Когда происходит обновление, вызывается предоставленная функция с последней версией данных в «тренировке / разминке».

Данные извлекаются и помещаются в источник данных списка. Затем состояние приложения обновляется, что, в свою очередь, обновляет отображение списка.

Чтобы очистить, прекратите прослушивание, когда компонент отключен.

componentDidUnMount() {
        this.state.dbulref.off('value');
}

Коротко и просто, но очень мощно. Firebase позаботится обо всех сложных частях.