Firebase - это серверная часть как услуга (BaaS), которая дает преимущество мобильным разработчикам, использующим React Native для разработки мобильных приложений. Как разработчик React Native, используя Firebase, вы можете начать создавать MVP (минимально жизнеспособный продукт), сохраняя низкие затраты и быстро создавая прототип приложения.
В этом руководстве мы узнаем, как начать работу с интеграции Firebase с приложением React Native. Мы также создадим небольшое приложение с нуля с помощью Firebase и React Native, чтобы увидеть, как они работают вместе.
Начиная
Firebase - это платформа, приобретенная Google и имеющая здоровое и активное сообщество. Большинство пользователей в этом сообществе - веб-разработчики и разработчики мобильных приложений, поскольку Firebase может помочь с мобильной аналитикой, push-уведомлениями, отчетами о сбоях и сразу же предоставляет электронную почту, а также социальную аутентификацию.
Для начала вам понадобится целевая мобильная ОС, независимо от того, выберете ли вы iOS, Android или и то, и другое. Если вы впервые настраиваете среду разработки React Native, обратитесь к официальной документации React Native. Вам понадобятся инструменты sdk и Android Studio, особенно для настройки среды разработчика для Android. Для iOS вам нужно только установить Xcode на Mac. Также вам понадобятся:
- Установлены Nodejs (
>= 8.x.x) и npm / yarn - Реагировать-native-cli (
>= 2.0.1)
React Native распространяется в виде двух пакетов npm, react-native-cli и react-native. Мы собираемся использовать react-native-cli для создания приложения. Начните с установки react-native-cli:
npm install -s react-native-cliТеперь давайте создадим новый проект React Native под названием «rnFirebaseDemo»:
react-native init rnFirebaseDemoКогда вышеуказанная команда будет выполнена, перейдите в каталог проекта, используя cd rnFirebaseDemo. Теперь давайте проверим, все ли работает правильно и наше приложение React Native было правильно инициализировано, выполнив одну из следующих команд:
# on macOS react-native run-ios # For Windows/Unix users react-native run-android
Эта команда запустит экран по умолчанию, как показано ниже, в симуляторе iOS или эмуляторе Android, но это займет некоторое время, так как мы запускаем его впервые.
Добавление Firebase
Чтобы добавить Firebase в наше существующее приложение React Native, нам нужно установить зависимость.
yarn add firebaseКогда мы открываем проект в редакторе кода, его структура выглядит так:
Нам нужно внести некоторые изменения, прежде чем мы действительно сможем начать создавать наше приложение. Создайте каталог src внутри корневой папки. Здесь будут жить компоненты и экраны нашего приложения. Далее в каталоге src мы создадим две папки: screens и components.
Каталог screen будет содержать все компоненты, связанные с пользовательским интерфейсом, которые нам нужно отобразить для конечного пользователя, тогда как папка components будет содержать любой другой компонент, который будет использоваться или повторно использоваться для отображения пользовательского интерфейса.
Давайте создадим наш первый экран, Главный экран, внутри screens/ с новым файлом Home.js.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class Home extends Component {
render() {
return (
<View>
<Text>Home Screen</Text>
</View>
);
}
}
Наш следующий экран будет Add Item. Создайте новый файл с именем AddItem.js.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class AddItem extends Component {
render() {
return (
<View>
<Text>Add Item</Text>
</View>
);
}
}
Наш последний экран будет списком элементов, которые нам нужно отобразить. В том же каталоге создайте новый файл с именем List.js.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class List extends Component {
render() {
return (
<View>
<Text>List</Text>
</View>
);
}
}
Чтобы перемещаться между разными экранами, нам нужно добавить библиотеку react-navigation. Мы собираемся использовать последнюю версию - 3.0.0.
yarn add react-navigationДалее мы установим react-native-gesture-handler. Если вы используете Expo, вам не нужно здесь ничего делать.
yarn add react-native-gesture-handlerСледующим шагом будет выполнение приведенной ниже команды и связывание только что установленных библиотек:
react-native linkПосле добавления этого пакета давайте снова запустим процесс сборки:
# on macOS react-native run-ios # For Windows/Unix users react-native run-android
Теперь, чтобы увидеть это в действии, давайте добавим компонент Home в качестве первого экрана. Добавьте следующий код в App.js.
import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './src/screens/Home';
// we will use these two screens later in our AppNavigator
import AddItem from './src/screens/AddItem';
import List from './src/screens/List';
const AppNavigator = createStackNavigator({
Home: {
screen: Home
}
});
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component {
render() {
return <AppContainer />;
}
}
На этом этапе, если мы перейдем к симулятору, то увидим следующий результат:
Появляется главный экран. Мы добавим два других экрана в качестве маршрутов к AppNavigator, чтобы переходить к ним через главный экран.
const AppNavigator = createStackNavigator(
{
Home,
AddItem,
List
},
{
initialRouteName: 'Home'
}
);
Теперь в нашем стеке есть три маршрута: маршрут Home, маршрут AddItem и маршрут ListItem. Маршрут Home соответствует компоненту Home экрана, AddItem соответствует экрану AddItem, а маршрут ListItem соответствует компоненту ListItem. Первоначальный маршрут для стека - это маршрут Home, он определяется, если у нас есть несколько экранов и нужно описать начальную точку.
Ранее мы определили стековый навигатор с тремя маршрутами, но не подключали их для навигации между ними. Что ж, это тоже простая задача. Библиотека react-navigation предоставляет нам возможность управлять переходом с одного экрана на другой и обратно. Чтобы это работало, мы изменим файл Home.js.
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
export default class Home extends Component {
render() {
return (
<View>
<Text>Home Screen</Text>
<Button
title="Add an Item"
onPress={() => this.props.navigation.navigate('AddItem')}
/>
<Button
title="List of Items"
color="green"
onPress={() => this.props.navigation.navigate('List')}
/>
</View>
);
}
}
В приведенном выше коде мы добавляем Button компонент из react-native API. react-navigation передает свойство навигации в форме this.props.navigation на каждый экран в навигаторе стека. Мы должны использовать то же экранное имя для функции onPress для навигации, как мы определили в App.js в разделе AppNavigator.
Вы также можете настроить кнопку «Назад» вручную, выбрав собственный стиль на обоих экранах AddItem и List, но для нашей демонстрации мы будем использовать значение по умолчанию.
Создание базы данных с помощью Firebase
Зайдите в консоль Firebase, войдите в свою учетную запись Google и создайте новый проект.
Затем мы добавим конфигурацию базы данных в новый файл внутри src/config.js.
import Firebase from 'firebase';
let config = {
apiKey: 'AIzaXXXXXXXXXXXXXXXXXXXXXXX',
authDomain: 'rnfirebXXX-XXXX.firebaseapp.com',
databaseURL: 'rnfirebXXX-XXXX.firebaseapp.com',
projectId: 'rnfirebase-XXXX',
storageBucket: 'rnfirebase-XXXX.appspot.com',
messagingSenderId: 'XXXXXXX'
};
let app = Firebase.initializeApp(config);
export const db = app.database();
В объекте конфигурации вы вводите данные, которые получаете после создания нового проекта в Firebase и перехода к разделу Добавить Firebase в свое веб-приложение. Также в консоли Firebase на левой боковой панели нажмите База данных, а затем выберите первый вариант: ((База данных в реальном времени)). Затем перейдите в «правила» и вставьте следующее:
{ "rules": { ".read": true, ".write": true } }
Добавление данных из приложения в Firebase
В этом разделе мы отредактируем AddItem.js, который представляет поле ввода и кнопку. Пользователь может добавить элемент в список, и он будет сохранен в данных Firebase.
import React, { Component } from 'react';
import {
View,
Text,
TouchableHighlight,
StyleSheet,
TextInput,
AlertIOS
} from 'react-native';
import { db } from '../config';
let addItem = item => {
db.ref('/items').push({
name: item
});
};
export default class AddItem extends Component {
state = {
name: ''
};
handleChange = e => {
this.setState({
name: e.nativeEvent.text
});
};
handleSubmit = () => {
addItem(this.state.name);
AlertIOS.alert('Item saved successfully');
};
render() {
return (
<View style={styles.main}>
<Text style={styles.title}>Add Item</Text>
<TextInput style={styles.itemInput} onChange={this.handleChange} />
<TouchableHighlight
style={styles.button}
underlayColor="white"
onPress={this.handleSubmit}
>
<Text style={styles.buttonText}>Add</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
main: {
flex: 1,
padding: 30,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#6565fc'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: 'center'
},
itemInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
borderWidth: 1,
borderColor: 'white',
borderRadius: 8,
color: 'white'
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center'
}
});
В приведенном выше коде мы добавляем экземпляр базы данных Firebase из config.js и db, а затем нажимаем любой элемент, добавленный пользователем через addItem и handleSubmit(). Вы получите предупреждающее сообщение, когда нажмете кнопку Добавить, чтобы добавить элемент из входного значения, как показано ниже.
Чтобы убедиться, что данные есть в базе данных, перейдите в консоль Firebase.
Получение элементов из базы данных
Чтобы получить данные из базы данных Firebase, мы будем использовать ту же ссылку на db в List.js.
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ItemComponent from '../components/ItemComponent';
import { db } from '../config';
let itemsRef = db.ref('/items');
export default class List extends Component {
state = {
items: []
};
componentDidMount() {
itemsRef.on('value', snapshot => {
let data = snapshot.val();
let items = Object.values(data);
this.setState({ items });
});
}
render() {
return (
<View style={styles.container}>
{this.state.items.length > 0 ? (
<ItemComponent items={this.state.items} />
) : (
<Text>No items</Text>
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ebebeb'
}
});
Для ItemComponent мы создаем новый файл внутри components/ItemComponent.js. Это неэкранный компонент. Только List будет использовать его для map и отображать каждый элемент.
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
export default class ItemComponent extends Component {
static propTypes = {
items: PropTypes.array.isRequired
};
render() {
return (
<View style={styles.itemsList}>
{this.props.items.map((item, index) => {
return (
<View key={index}>
<Text style={styles.itemtext}>{item.name}</Text>
</View>
);
})}
</View>
);
}
}
const styles = StyleSheet.create({
itemsList: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around'
},
itemtext: {
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center'
}
});
На этом шаге завершается интеграция базы данных Firebase с нашим приложением React Native. Теперь вы можете добавить новые элементы данных и получить их из базы данных, как показано ниже.
Заключение
В этом руководстве мы показали вам, как интегрировать Firebase с приложением React Native. Вы не полноценный сервер, который создает API и в дальнейшем использует базу данных для прототипирования или создания MVP вашего приложения.
Вы можете найти полный код внутри этого репозитория на Github. Если у вас есть какие-либо вопросы, вы можете задать их автору напрямую, написав на @amanhimself.
Первоначально опубликовано на blog.jscrambler.com автором Aman Mittal.
