You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Supabase是否兼容React Native CLI项目?配置及替代方案咨询

React Native CLI 项目中使用 Supabase 的方案及替代建议

一、完全可以在 React Native CLI 项目中使用 Supabase

不需要单独套用Kotlin或Swift的原生配置,官方提供的@supabase/supabase-js库完全支持React Native CLI项目,核心配置和使用逻辑与Web/Expo一致,仅在涉及原生端跳转(如Auth验证)时需要少量原生配置,具体步骤如下:

  1. 安装依赖
    在项目根目录执行:
npm install @supabase/supabase-js
# 或 yarn
yarn add @supabase/supabase-js
  1. 初始化Supabase客户端
    在项目中创建supabase.js(或.ts)文件,初始化客户端实例:
import { createClient } from '@supabase/supabase-js'

// 替换为你的Supabase项目URL和匿名密钥,可在Supabase控制台获取
const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY'

export const supabase = createClient(supabaseUrl, supabaseAnonKey)
  1. 在组件中调用Supabase服务
    直接导入客户端实例即可使用Auth、数据库存储等功能,示例:
import { supabase } from './supabase'

// 邮箱密码登录
const handleSignIn = async () => {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: 'user@example.com',
    password: 'your-password'
  })
  
  if (error) console.error(error)
  else console.log('登录成功:', data.user)
}

// 查询数据库数据
const fetchPosts = async () => {
  const { data, error } = await supabase.from('posts').select('*').limit(10)
  
  if (error) console.error(error)
  else console.log('查询结果:', data)
}
  1. 原生端额外配置(可选)
    如果需要使用邮箱验证、密码重置等涉及深度链接的Auth功能,才需要在原生端配置回调URL:
  • Android:在android/app/src/main/AndroidManifest.xml中添加intent-filter,处理Supabase的回调URL
  • iOS:在Info.plist中配置URL Schemes,并在AppDelegate.m(或.swift)中处理URL跳转逻辑
    这部分仅为配置项,不需要编写业务逻辑,参考Supabase官方的Auth原生配置文档即可。

二、关系型BaaS替代方案

如果Supabase不符合你的需求,推荐以下几个适配React Native CLI的关系型BaaS:

  • AWS Amplify:支持PostgreSQL等关系型数据库,提供完整的React Native SDK,可通过CLI快速配置,适配原生项目
  • Appwrite:开源BaaS,内置PostgreSQL数据库,提供React Native专用SDK,配置简单,支持自托管
  • Parse:老牌开源BaaS,支持连接PostgreSQL,有成熟的React Native适配方案,灵活性高

内容的提问来源于stack exchange,提问作者Thomas Augot

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.10 00:45:04