Начните свой проект React Native Expo, используя заранее подготовленный шаблон
9 мин
введение в этом разделе вы узнаете, как начать работу с react native с использованием шаблона expo и как подключить его к back4app за 4 простых шага предварительные требования чтобы завершить этот учебник, вам потребуется приложение backend back4app примечание следуйте учебнику по созданию нового parse app https //www back4app com/docs/get started/new parse app чтобы узнать, как создать parse app на back4app npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm или yarn https //classic yarnpkg com/en/docs/install установлен на вашем компьютере expo cli установлен в соответствии с этим руководством https //docs expo io/get started/installation/?redirected 1 получите шаблон чтобы получить проект шаблона, загрузите и распакуйте исходный код из нашего репозитория github https //github com/templates back4app/react native template на ваш компьютер или клонируйте проект с помощью командной строки git запустите следующую команду, чтобы загрузить и извлечь шаблон с помощью curl curl lok https //github com/templates back4app/react native template/archive/master zip && unzip master zip или запустите следующую команду, чтобы клонировать шаблон с помощью git git clone https //github com/templates back4app/react native template 2 загрузите зависимости приложения убедитесь, что вы установили \<font color="#2166ae">npm\</font> или \<font color="#2166ae">yarn\</font> в вашей системе посмотрите на получить npm https //docs npmjs com/getting started или получить yarn https //classic yarnpkg com/en/docs/install#windows stable руководства для получения дополнительной информации 2\ в вашем терминале выполните \<font color="#2166ae">cd react native template master\</font> и откройте корневую директорию проекта 3\ выполните \<font color="#2166ae">npm install\</font> для установки зависимостей в этом руководстве мы используем npm для управления зависимостями, но вы можете использовать yarn вместо этого 3 настройте учетные данные приложения чтобы приложение могло безопасно подключаться к серверам back4app, вы должны предоставить parse javascript sdk учетные данные приложения найдите ваш \<font color="#2166ae">id приложения\</font> и \<font color="#2166ae">javascript ключ\</font> учетные данные, перейдя в \<font color="#2166ae">панель управления\</font> > \<font color="#2166ae">настройки приложения\</font> > \<font color="#2166ae">безопасность и ключи\</font> в корневом каталоге проекта откройте файл по адресу \<font color="#2166ae">app/(tabs)/index tsx\</font> файл должен выглядеть так index tsx parse initialize( 'your application id here', // replace with your parse application id 'your javascript key here' // replace with your parse javascript key ); parse serverurl = 'https //parseapi back4app com/'; скопируйте и вставьте ваш \<font color="#2166ae">id приложения\</font> и \<font color="#2166ae">javascript ключ\</font> в него 4 проверьте ваше соединение внутри \<font color="#2166ae">app js\</font> вашего шаблонного проекта есть функция, которая создает объект person, и другая для получения людей вашего приложения в вашу базу данных back4app index tsx // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } чтобы запустить и протестировать соединение вашего приложения откройте терминал вашего проекта запустите \<font color="#2166ae">npm run android\</font> или \<font color="#2166ae">npm run ios\</font> или \<font color="#2166ae">npm run start\</font> чтобы открыть приложение на вашей целевой платформе готово! на этом этапе вы узнали, как запустить и работать с приложением react native, подключенным к back4app