如何使用React Native Expo模板集成Parse Server SDK

9min
介绍
在本节中，您将学习如何使用 React Native 和一个 Expo 模板开始，并如何在4个简单步骤中将其连接到Back4App。
先决条件
要完成本教程，您需要：

一个后端的Back4App应用。
注意：请遵循 新Parse应用教程 以了解如何在Back4App上创建Parse应用。
﻿NPM 或 YARN 已安装在您的系统上。
按照 本指南 安装Expo CLI。
1 - 获取模板
要获取模板项目，请下载并解压我们在 GitHub仓库 的源代码到您的机器上，或使用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 - 下载应用的依赖项
确保您已在系统中安装了 npm 或 yarn。
查看 获取 npm 或 获取 yarn 的指南以获取更多信息。
     2. 在终端中，运行 cd react-native-template-master 并打开项目的根目录。
     3. 运行 npm install 来安装依赖项。
在本教程中，我们使用 npm 来管理依赖项，但您可以自由选择使用 yarn。
3 - 设置应用的凭据
为了让应用安全地连接到 Back4App 服务器，您必须向 Parse JavaScript SDK 提供应用的凭据。
找到您的 应用 ID 和 JavaScript 密钥 凭据，方法是导航到您的应用 仪表板 > 应用设置 > 安全性与密钥.
在项目的根目录中，打开文件： app/(tabs)/index.tsx.
该文件应如下所示：
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/'; 
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/'; 
﻿
复制并粘贴您的 应用 ID 和 JavaScript 密钥 到其中.
4 - 测试您的连接
在你的模板项目的 App.js 中，有一个创建 Person 对象的函数和一个从你的 App 中获取 People 到 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);
    }
  }
  // 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);
    }
  }
﻿
要运行和测试你的 App 连接：
打开你项目的终端。
运行npm run android 或 npm run ios 或 npm run start 以在你的目标平台上打开应用程序
﻿
﻿
完成了！
到此为止，你已经学会了如何启动并运行一个连接到 Back4app 的 React Native 应用程序。
更新日期 27 Jan 2025
此页面是否对您有帮助？
上一个
React Native 与 Parse SDK 的集成与使用详解
下一个
React Native中的Parse基本数据操作指南