入门

使用 Supabase 与 Expo React Native

了解如何创建一个 Supabase 项目，向你的数据库添加一些示例数据，并从一个 Expo 应用中查询这些数据。

1

创建一个 Supabase 项目

前往 database.new 并创建一个新的 Supabase 项目。

或者，您可以使用管理 API 创建项目

1
# First, get your access token from https://supabase.org.cn/dashboard/account/tokens
2
export SUPABASE_ACCESS_TOKEN="your-access-token"
3
4
# List your organizations to get the organization ID
5
curl -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
6
  https://api.supabase.com/v1/organizations
7
8
# Create a new project (replace <org-id> with your organization ID)
9
curl -X POST https://api.supabase.com/v1/projects \
10
  -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
11
  -H "Content-Type: application/json" \
12
  -d '{
13
    "organization_id": "<org-id>",
14
    "name": "My Project",
15
    "region": "us-east-1",
16
    "db_pass": "<your-secure-password>"
17
  }'

当您的项目启动并运行时，前往 表格编辑器，创建一个新表格并插入一些数据。

或者，您可以在项目的 SQL 编辑器 中运行以下代码片段。这将创建一个包含一些示例数据的 instruments 表。

1
-- Create the table
2
create table instruments (
3
  id bigint primary key generated always as identity,
4
  name text not null
5
);
6
-- Insert some sample data into the table
7
insert into instruments (name)
8
values
9
  ('violin'),
10
  ('viola'),
11
  ('cello');
12
13
alter table instruments enable row level security;

通过添加 RLS 策略使表格中的数据可公开读取

1
create policy "public can read instruments"
2
on public.instruments
3
for select to anon
4
using (true);
2

创建一个 Expo 应用

使用 create-expo-app 命令和空白 TypeScript 模板创建一个最小的 Expo 应用。

终端
1
npx create-expo-app my-app --template blank-typescript
3

安装 Supabase 客户端库

最快入门的方法是使用 @supabase/supabase-js 客户端库，它为从 React Native 应用中使用 Supabase 提供了便捷的接口。

导航到 Expo 应用并安装 supabase-js 以及安全存储和 URL 处理所需的依赖项。

终端
1
cd my-app && npx expo install @supabase/supabase-js react-native-url-polyfill expo-sqlite
4

声明 Supabase 环境变量

在项目的根目录下创建一个 .env 文件，并用你的 Supabase 连接变量填充它。

Expo 要求环境变量以 EXPO_PUBLIC_ 前缀开头，才能在你的应用代码中访问。

项目 URL
可发布密钥
匿名密钥
.env
1
EXPO_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
2
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>

你还可以从 项目的 连接 对话框 获取项目 URL 和密钥。

阅读 API 密钥文档 以全面了解所有密钥类型及其用途。

5

初始化 Supabase 客户端

在 lib/supabase.ts 创建一个辅助文件，使用环境变量初始化 Supabase 客户端。

下面的代码使用 Expo 的 localStorage polyfill 来持久化身份验证会话。

lib/supabase.ts
1
import 'react-native-url-polyfill/auto'
2
import { createClient } from '@supabase/supabase-js'
3
import 'expo-sqlite/localStorage/install';
4
5
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL
6
const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY
7
8
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
9
  auth: {
10
    storage: localStorage,
11
    autoRefreshToken: true,
12
    persistSession: true,
13
    detectSessionInUrl: false,
14
  },
15
})
6

从应用查询数据

用以下代码替换 App.tsx 的内容，以获取并显示数据库中的乐器。

使用 useEffect 在组件挂载时获取数据，并使用 React Native 组件显示查询结果。

App.tsx
1
import { useEffect, useState } from 'react'
2
import { StyleSheet, View, FlatList, Text } from 'react-native'
3
import { supabase } from './lib/supabase'
4
5
export default function App() {
6
  const [instruments, setInstruments] = useState([])
7
8
  useEffect(() => {
9
    getInstruments()
10
  }, [])
11
12
  async function getInstruments() {
13
    const { data } = await supabase.from('instruments').select()
14
    setInstruments(data)
15
  }
16
17
  return (
18
    <View style={styles.container}>
19
      <FlatList
20
        data={instruments}
21
        keyExtractor={(item) => item.id.toString()}
22
        renderItem={({ item }) => (
23
          <Text style={styles.item}>{item.name}</Text>
24
        )}
25
      />
26
    </View>
27
  )
28
}
29
30
const styles = StyleSheet.create({
31
  container: {
32
    flex: 1,
33
    backgroundColor: '#fff',
34
    paddingTop: 50,
35
    paddingHorizontal: 16,
36
  },
37
  item: {
38
    padding: 16,
39
    borderBottomWidth: 1,
40
    borderBottomColor: '#ccc',
41
  },
42
})
7

启动应用

运行开发服务器，并使用手机上的 Expo Go 应用扫描二维码，或者按 i 打开 iOS 模拟器，按 a 打开 Android 模拟器。

终端
1
npx expo start

下一步#