React Native: Parse SDK Hook для Реального Времени

10 мин

начало работы с хуком react для обновлений в реальном времени с использованием parse введение добро пожаловать в parse react native lib! в этом руководстве вы узнаете, что такое parse react lib, как его установить и начать использовать в вашем проекте на react native мотивация самый простой способ интегрировать parse/back4app в ваш проект на javascript — это через parse javascript sdk https //www npmjs com/package/parse эта библиотека работает в нескольких средах javascript, таких как nodejs, reactjs, vuejs, angularjs, react native, и предоставляет вам доступ к функциям back4app цель parse react native — сделать этот опыт еще лучше для разработчиков react native, предоставляя легкий и простой в использовании слой, который требует минимальной настройки, повторного использования кода и нативной оптимизации для android и ios использование этого пакета обеспечит автоматическую доступность таких элементов, как настройка учетных данных, http запросы, синхронизация в реальном времени, взаимодействие с приоритетом оффлайн для вашего приложения react native библиотека полностью написана на typescript, на основе parse javascript sdk https //www npmjs com/package/parse , и в настоящее время находится на альфа версии в этом начальном руководстве вы установите и настроите библиотеку @parse/react native в вашем проекте react native parse react native в настоящее время находится на альфа версии библиотека проходит тестирование, поэтому мы рекомендуем действовать с осторожностью ваши отзывы очень ценны, поэтому не стесняйтесь использовать библиотеку и отправлять нам ваши вопросы и первые впечатления, написав на community\@back4app com предварительные условия для завершения этого руководства вам потребуется приложение создано на back4app следуйте руководству по включение live query npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm или yarn установлен npx https //www npmjs com/package/npx пакетный запускатель установлен 1 установка если у вас нет приложения react native, создайте новый проект с помощью npx npx пакетного запускателя, используя следующую команду установите @parse/react native @parse/react native и его зависимость parse parse в вашем приложении react native 2 настройка приложения чтобы приложение могло безопасно подключаться к серверам back4app, вы должны предоставить parse javascript sdk учетные данные приложения 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3	 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); вы можете найти свой app id app id и javascript key javascript key учетные данные, открыв ваше приложение dashboard dashboard на сайт back4app https //www back4app com/ и нажав на настройки приложения настройки приложения > основные настройки основные настройки , в разделе настройки сервера настройки сервера ваш субдомен должен быть включен в настройки приложения настройки приложения > основные настройки основные настройки > url сервера и живой запрос url сервера и живой запрос для получения дополнительной информации, пожалуйста, проверьте это руководство здесь https //www back4app com/docs/platform/parse live query 3 создание вашего первого запроса далее вы создадите свой первый запрос и отобразите его в своем приложении библиотека @parse/react native @parse/react native экспортирует хук useparsequery useparsequery , так что вы не тратите время на изучение того, как реализовать такие функции, как поддержка оффлайн, изменения в реальном времени и так далее это требует parse query parse query и возвращает объект с некоторыми свойствами, которые вы можете использовать для доступа к данным, возвращаемым запросами 1 // in your app js 2	 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6	 7 // remember to call initializeparse with your credentials before using useparsequery 8 initializeparse( 9 'https //your subdomain b4a io/', 10 'application id', 11 'javascript key' 12 ); 13	 14 export default function app() { 15 const parsequery = new parse query('todo'); 16 const { 17 islive, 18 isloading, 19 issyncing, 20 results, 21 count, 22 error, 23 reload 24 } = useparsequery(parsequery); 25	 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29	 30 return ( 31 \<flatlist 32 data={results} 33 renderitem={({item}) => ( 34 \<view 35 style={ { 36 height 70, 37 flex 1, 38 alignitems 'center', 39 justifycontent 'center', 40 } }> 41 \<text>task {item get('title')}\</text> 42 \</view> 43 )} 44 />); 45 } при передаче запроса в хук он сначала будет искать кэшированные результаты, которые он мог сохранить затем он создает соединение websocket для связи с сервером back4app livequery, который синхронизируется автоматически другими словами, подход с приоритетом оффлайна и изменения в реальном времени включены по умолчанию чтобы проверить состояние запроса, используйте props props возвращенные хуком islive islive если true true , это означает, что запрос подписан на обновления в реальном времени isloading isloading если true true , запрос получает результаты issyncing issyncing если true true , запрос получает обновленные результаты с серверов back4app results results это данные, возвращаемые запросом count count указывает количество объектов, соответствующих запросу error error когда что то идет не так с запросом, он возвращает ошибку reload reload перезагрузите результаты вашего запроса используйте useparsequery useparsequery для принятия любого parse query parse query и вы можете увидеть полную документацию https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs с примерами запросов parse 4 протестируйте приложение теперь вы должны иметь возможность запустить ваше react native приложение и увидеть результаты имейте в виду, что вам нужно добавить некоторые данные в ваш проект back4app, чтобы увидеть некоторые элементы в вашем приложении готово! на этом этапе вы установили @parse/react native @parse/react native в вашем проекте, настроили соединения с back4app и написали ваш первый запрос в следующем руководстве вы увидите одну из основных функций этой библиотеки, как ее использовать давайте продолжим к “изменения в реальном времени” https //reactnavigation org/docs/1 x/hello react navigation чтобы начать писать еще несколько запросов