Пример React Native Firebase

Давайте начнем наш пример, установив React Native Project.

Шаг 1. Установите React Native.

Установите React Native CLI с помощью следующая команда.

 # для пользователей Mac sudo npm install -g response-native-cli # для пользователей Windows: откройте cmd в режиме администратора и введите npm install -g  react-native-cli

Теперь создайте наш проект, используя следующую команду.

 response-native init RNFbase

Войдите в этот проект.

 cd RNFbase

Запустите сервер пакетов и симулятор, используя следующую команду .

 react-native run-ios --simulator = "iPhone X"

Вы увидите этот экран.

Если вы столкнулись с желтым предупреждением gs вроде isMounted (…) устарел в простых классах реакции javascript »с этой зависимостью , затем добавьте следующий код в файл App.js .

//App.jsimport {YellowBox} из 'react-native'; YellowBox.ignoreWarnings (['Предупреждение: isMounted (...) устарело', 'Модуль RCTImageLoader']);

Шаг 2. Установка зависимости Firebase.

Введите следующую команду, чтобы установить Firebase.

 yarn add  firebase # ornpm install firebase --save

Шаг 3. Создайте необходимые каталоги.

В корне проекта сделайте один каталог с именем src. В этом каталоге создайте три папки.

screen
компоненты
services

Screens содержит экраны, которые нам нужно показать пользователю. В нашем случае мы создадим три экрана.

Components папка содержит мобильные компоненты, которые мы будем использовать для отображения данных из API .

Services содержит сетевые файлы. Это файлы, в которых мы напишем код, чтобы сделать запрос к серверу и получить ответ от сервера.

Шаг 4: Создайте два экрана.

Внутри папки src >> screen создайте следующие файлы.

Home.js
AddItem.js
ListItem.js

— это чистый класс React Native .

//Дом. jsimport React, {Component} из 'react'; импорт {View, Text} из 'react-native'; экспорт класса по умолчанию Home extends Component {render () {return (  Home Screen  )}}

То же самое для файла AddItem.js .

//AddItem.jsimport React, {  Component} из response; импорт {View, Text} из response-native; экспорт класса по умолчанию AddItem расширяет Component {render () {return (  Добавить элемент  )  }}

То же самое для файла ListItem.js .

//ListItem.jsimport React, {Component} from '  react '; импорт {View, Text} из' react-native '; экспорт класса по умолчанию ListItem расширяет Component {render () {return (  List Item  )}}

Нам нужно установить библиотеку React Navigation для переходить приложение с одного экрана на другой.

 y  arn add response-navigation # ornpm install response-navigation --save

Теперь, после установки, перейдите к файлу App.js . Мы будем использовать StackNavigator для перехода с одного экрана на другой. Это маршрутизация для нашего приложения.

//App.jsimport React, {Component} из 'react'; import {Platform, StyleSheet, Text, View} из 'react-native'; import {  StackNavigator} из 'response-navigation'; импортировать главную страницу из './src/screens/Home'; импортировать AddItem из' ./src/screens/AddItem'; импортировать ListItem из './src/screens/ListItem';import {  YellowBox} из 'react-native'; YellowBox.ignoreWarnings (['Предупреждение: isMounted (...) устарело', 'Модуль RCTImageLoader']); const AppNavigator = StackNavigator ({HomeScreen: {screen: Home}, AddItemScreen:  {screen: AddItem}, ListItemScreen: {screen: ListItem}}); экспорт класса по умолчанию. Приложение расширяет компонент {render () {return ();  }}

Мы включили сюда оба экрана и передали этот экран в функцию StackNavigator. Он будет обрабатывать переход наших экранов. HomeScreen выглядит следующим образом.

Шаг 6. Создайте базу данных в консоли Firebase.

Перейдите на https://firebase.google.com , войдите в свою учетную запись Google и создайте новый проект.

Теперь в React Native мы получаем конфигурацию базы данных как веб-приложение, поэтому перейдите в раздел своего веб-приложения и получите объект конфигурации. Нам нужно подключить наше приложение к firebase .

Создайте новую папку внутри папки src с именем config и создайте новый файл с именем db.js. Напишите в нем следующий код.

//db.jsimport Firebase from 'firebase';  let config = {apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: ""}; let app = Firebase.initializeApp (config); export const db = app  .database ();

У вас есть значения конфигурации, поэтому вам нужно скопировать всю конфигурацию из приложения firebase.

Шаг 7: Создайте форму для добавления данных.

Напишите следующий код внутри файла AddItem.js .

//AddItem.jsimport React, {Component} из 'react'; импорт {View, Text, StyleSheet, TextInput, TouchableHighlight} из 'react-native'; экспорт класса по умолчанию AddItem расширяет Component {constructor (props) {super (props);  this.state = {имя: '', ошибка: ложь} this.handleChange = this.handleChange.bind (это);  this.handleSubmit = this.handleSubmit.bind (это);  } handleChange (e) {this.setState ({имя: e.nativeEvent.text});  } handleSubmit () {console.log (this.state.name)} render () {return (  Добавить элемент     Добавить   )}} const styles = StyleSheet.create ({main: {flex: 1, padding: 30, flexDirection: 'column', justifyContent: 'center', backgroundColor: '# 2a8ab7  '}, title: {marginBottom: 20, fontSize: 25, textAlign:' center '}, itemInput: {height: 50, padding: 4, marginRight: 5, fontSize: 23, borderWidth: 1, borderColor:' белый ',  borderRadius: 8, цвет: 'белый'}, buttonText: {fontSize: 18, цвет: '# 111', alignSelf: 'center'}, button: {height: 45, flexDirection: 'row', backgroundColor: 'white'  , borderColor: 'белый', borderWidth: 1, borderRadius: 8, marginBottom: 10, marginTop: 10, alignSel  f: 'stretch', justifyContent: 'center'}});

Итак, я определил базовый стиль нашей формы. Итак, наш экран AddItem.js выглядит так.

Шаг 8. Создайте служебный файл для добавления данных в Firebase.

Внутри services , создайте один файл с именем

//ItemService.jsimport {db} из '../ config/db '; export const addItem = (item) => {db.ref ('/items '). push ({name: item});}

Теперь нам нужно импортировать этот файл служб в файл AddItem.js .

//AddItem. jsimport React, {Component} из 'react'; импорт {View, Text, StyleSheet, TextInput, TouchableHighlight, AlertIOS} из 'react-native'; импорт {addItem} из '../services/ItemService'; экспорт класса по умолчанию AddItem  расширяет компонент {конструктор (реквизиты) {супер (реквизиты);  this.state = {имя: ''} this.handleChange = this.handleChange.bind (это);  this.handleSubmit = this.handleSubmit.bind (это);  } handleChange (e) {this.setState ({имя: e.nativeEvent.text});  } handleSubmit () {addItem (this.state.name);  AlertIOS.alert («Элемент успешно сохранен»);  } render () {return (  Добавить элемент     Добавить   )}} const  styles = StyleSheet.create ({main: {flex: 1, padding: 30, flexDirection: 'column', justifyContent: 'center', backgroundColor: '# 2a8ab7'}, title: {marginBottom: 20, fontSize: 25, textAlign  : 'center'}, itemInput: {height: 50, padding: 4, marginRight: 5, fontSize: 23, borderWidth: 1, borderColor: 'белый', borderRadius: 8, цвет: 'белый'}, buttonText: {fontSize  : 18, цвет: '# 111', alignSelf: 'center'}, кнопка: {height: 45, flexDirection: 'row', backgroundColor: 'white', borderColor: 'white', borderWidth: 1, borderRadius: 8,  marginBottom: 10, marginTop: 10, alignSelf: 'stretch', justifyContent: 'center'}});

I импортировали функцию addItem и передали этой функции значение нашего текстового поля, а также импортировали компонент AlertIOS , чтобы отобразить окно предупреждения о том, что наши данные были успешно сохранены.

Также, вы можете увидеть данные в Firebase .

Шаг 9. Отображение элементов.

Напишите следующий код внутри Файл ListItem.js .

//ListItem.jsimport React, {Component} из 'react'; импорт {View, Text, StyleSheet} из 'react-native'; импорт ItemComponent  from '../components/ItemComponent';import {db} from' ../config/db';let itemsRef = db.ref ('/items'); const styles = StyleSheet.create ({container: {flex:  1, justifyContent: 'center', backgroundColor: '# B6A6BB',}}) экспорт класса по умолчанию ListItem расширяет Component {state = {items: []} comp  onentDidMount () {itemsRef.on ('значение', (снимок) => {let data = snapshot.val ();  let items = Объект. значения (данные);  this.setState ({items});  });  } render () {return ( {this.state.items.length> 0? :  Нет элементов } )}}

Хорошо, теперь нам нужно создать файл ItemComponent.js внутри src > > Папка components . Он отобразит наши данные из Firebase.

//ItemComponent.jsimport React, {Component} из 'react'; импорт {View, Text, StyleSheet} из 'react-native'; импорт PropTypes  from 'prop-types'; const styles = StyleSheet.create ({itemsList: {flex: 1, flexDirection: 'column', justifyContent: 'space-around',}, itemtext: {fontSize: 24, fontWeight: 'bold'  , textAlign: 'center',}}); экспорт класса по умолчанию ItemComponent расширяет компонент {static propTypes = {items: PropTypes.array.isRequired};  render () {return ( {this.props.items.map ((item, index) => {return (  {item.name}  )})} );  }}

Это не совсем дизайн, но я просто хотел, чтобы вы, ребята, увидели, как он может подключаться к Firebase, и мы можем получить данные и отобразить их на экране. Это основной девиз этого руководства.

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

Итак, Пример React Native Firebase Учебное пособие окончено. Спасибо, что приняли.