React Native 快速开始

AI 快速开始

准备工作

在开始之前，请确保您已完成以下准备：

1. 开通云开发环境：开通云开发环境
2. 获取 API 访问凭证：在 CloudBase 控制台 获取环境 ID 和 API 密钥

Client

配置你的 AI 工具以连接 CloudBase 能力 支持本地与托管两种连接方式，详见 连接方式。

步骤 1：安装 / 配置 CloudBase

步骤 2：和 AI 对话

在 AI 对话中依次输入以下内容:

prompt

安装 CloudBase Skills：命令 npx skills add tencentcloudbase/cloudbase-skills -y

使用 CloudBase Skills： 使用 CloudBase Skills：在 React Native 应用中集成 CloudBase HTTP API

完整开发指引

准备工作

在开始之前，请确保您已完成以下准备：

1. 开通云开发环境：开通云开发环境
2. 获取 API 访问凭证：在 CloudBase 控制台 获取环境 ID 和 API 密钥

更多详情请参考：React Native 完整文档

安装 SDK

@cloudbase/js-sdk 配合 @cloudbase/adapter-rn 可以让您在 React Native 项目中使用 JavaScript 访问 CloudBase 服务和资源。

npm

npm i @cloudbase/js-sdk @cloudbase/adapter-rn

yarn

yarn add @cloudbase/js-sdk @cloudbase/adapter-rn

pnpm

pnpm add @cloudbase/js-sdk @cloudbase/adapter-rn

iOS 需要安装原生依赖：

cd ios && pod install && cd ..

初始化 SDK

新增如下代码到您的 React Native 项目

src/utils/cloudbase.js

import cloudbaseSDK from "@cloudbase/js-sdk";
import adapter from "@cloudbase/adapter-rn";

cloudbaseSDK.useAdapters(adapter);

const cloudbase = cloudbaseSDK.init({
  // 环境 ID
  env: "{%ENV_ID%}",
  // 地域
  region: "{%REGION%}",
  // 匿名访问令牌
  accessKey: "{%PUBLISHABLE_KEY%}"
});

export default cloudbase;

身份认证

短信验证码注册

使用 短信验证码注册 请先前往 身份认证/登录方式 开启 短信验证码

调用方式：

import cloudbase from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ phone_number: phone });

// 验证验证码
const verifyRes = await auth.verify({
  verification_id: verificationId,
  verification_code: code
});

// 注册（如用户已存在则自动登录）
await auth.signUp({
  phone_number: `+86 ${phone}`,
  verification_code: code,
  verification_token: verifyRes.verification_token,
  name: `user_${phone.slice(-4)}`,
  password: "admin@123"
});

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function SmsRegister() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [verificationId, setVerificationId] = useState("");
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ phone_number: phone });
      setVerificationId(res.verification_id);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage(`发送失败: ${error.message}`);
    }
  };

  // 注册
  const register = async () => {
    try {
      const auth = cloudbase.auth();
      // 验证验证码
      const verifyRes = await auth.verify({
        verification_id: verificationId,
        verification_code: code
      });
      // 注册（如用户已存在则自动登录）
      await auth.signUp({
        phone_number: `+86 ${phone}`,
        verification_code: code,
        verification_token: verifyRes.verification_token,
        name: `user_${phone.slice(-4)}`,
        password: "admin@123"
      });
      setMessage("注册成功！");
      Alert.alert("成功", "注册成功");
    } catch (error) {
      setMessage(`注册失败: ${error.message}`);
      Alert.alert("失败", `注册失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>手机号：</Text>
      <TextInput
        style={styles.input}
        value={phone}
        onChangeText={setPhone}
        placeholder="13800000000"
        keyboardType="phone-pad"
      />
      <Text>验证码：</Text>
      <View style={styles.row}>
        <TextInput
          style={[styles.input, styles.codeInput]}
          value={code}
          onChangeText={setCode}
          placeholder="验证码"
          keyboardType="numeric"
        />
        <Button title="发送验证码" onPress={sendCode} disabled={!phone} />
      </View>
      <Button
        title="注册"
        onPress={register}
        disabled={!verificationId || !code}
      />
      {message && (
        <Text
          style={[
            styles.message,
            { color: message.includes("成功") ? "green" : "red" }
          ]}
        >
          {message}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  },
  row: {
    flexDirection: "row",
    alignItems: "center"
  },
  codeInput: {
    flex: 1,
    marginRight: 10
  },
  message: {
    marginTop: 20,
    textAlign: "center"
  }
});

邮箱验证码注册

使用 邮箱验证码注册 请先前往 身份认证/登录方式 开启 邮箱验证码

调用方式：

import cloudbase from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ email });

// 验证验证码
const verifyRes = await auth.verify({
  verification_id: verificationId,
  verification_code: code
});

// 注册（如用户已存在则自动登录）
await auth.signUp({
  email,
  verification_code: code,
  verification_token: verifyRes.verification_token,
  name: `user_${email.slice(-4)}`,
  password: "admin@123"
});

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function EmailRegister() {
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [verificationId, setVerificationId] = useState("");
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ email });
      setVerificationId(res.verification_id);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage(`发送失败: ${error.message}`);
    }
  };

  // 注册
  const register = async () => {
    try {
      const auth = cloudbase.auth();
      // 验证验证码
      const verifyRes = await auth.verify({
        verification_id: verificationId,
        verification_code: code
      });
      // 注册（如用户已存在则自动登录）
      await auth.signUp({
        email,
        verification_code: code,
        verification_token: verifyRes.verification_token,
        name: `user_${email.slice(-4)}`,
        password: "admin@123"
      });
      setMessage("注册成功！");
      Alert.alert("成功", "注册成功");
    } catch (error) {
      setMessage(`注册失败: ${error.message}`);
      Alert.alert("失败", `注册失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>邮箱：</Text>
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        placeholder="example@email.com"
        keyboardType="email-address"
      />
      <Text>验证码：</Text>
      <View style={styles.row}>
        <TextInput
          style={[styles.input, styles.codeInput]}
          value={code}
          onChangeText={setCode}
          placeholder="验证码"
          keyboardType="numeric"
        />
        <Button title="发送验证码" onPress={sendCode} disabled={!email} />
      </View>
      <Button
        title="注册"
        onPress={register}
        disabled={!verificationId || !code}
      />
      {message && (
        <Text
          style={[
            styles.message,
            { color: message.includes("成功") ? "green" : "red" }
          ]}
        >
          {message}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  },
  row: {
    flexDirection: "row",
    alignItems: "center"
  },
  codeInput: {
    flex: 1,
    marginRight: 10
  },
  message: {
    marginTop: 20,
    textAlign: "center"
  }
});

账号密码登录

使用 账号密码登录 请先前往 身份认证/登录方式 开启 用户名密码登录

调用方式：

import cloudbase from "./utils/cloudbase";

const auth = cloudbase.auth();

await auth.signIn({
  username, // 可以是用户名、手机号或邮箱
  password
});

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function PasswordLogin() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");

  // 登录
  const login = async () => {
    try {
      const auth = cloudbase.auth();
      await auth.signIn({
        username, // 可以是用户名、手机号或邮箱
        password
      });
      setMessage("登录成功！");
      Alert.alert("成功", "登录成功");
    } catch (error) {
      setMessage(`登录失败: ${error.message}`);
      Alert.alert("失败", `登录失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>账号：</Text>
      <TextInput
        style={styles.input}
        value={username}
        onChangeText={setUsername}
        placeholder="用户名/手机号/邮箱"
      />
      <Text style={styles.note}>注：手机号登录请添加区号 +86</Text>
      <Text>密码：</Text>
      <TextInput
        style={styles.input}
        value={password}
        onChangeText={setPassword}
        placeholder="请输入密码"
        secureTextEntry
      />
      <Button title="登录" onPress={login} disabled={!username || !password} />
      {message && (
        <Text
          style={[
            styles.message,
            { color: message.includes("成功") ? "green" : "red" }
          ]}
        >
          {message}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  },
  note: {
    fontSize: 12,
    color: "#666",
    marginBottom: 10
  },
  message: {
    marginTop: 20,
    textAlign: "center"
  }
});

短信验证码登录

使用 短信验证码登录 请先前往 身份认证/登录方式 开启 短信验证码登录

调用方式：

import cloudbase from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ phone_number: `+86 ${phone}` });

// 登录
await auth.signInWithSms({
  verificationInfo: res,
  verificationCode: code,
  phoneNum: `+86 ${phone}`
});

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function SmsLogin() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [verificationInfo, setVerificationInfo] = useState(null);
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ phone_number: `+86 ${phone}` });
      setVerificationInfo(res);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage(`发送失败: ${error.message}`);
    }
  };

  // 登录
  const login = async () => {
    try {
      const auth = cloudbase.auth();
      await auth.signInWithSms({
        verificationInfo,
        verificationCode: code,
        phoneNum: `+86 ${phone}`
      });
      setMessage("登录成功！");
      Alert.alert("成功", "登录成功");
    } catch (error) {
      setMessage(`登录失败: ${error.message}`);
      Alert.alert("失败", `登录失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>手机号：</Text>
      <TextInput
        style={styles.input}
        value={phone}
        onChangeText={setPhone}
        placeholder="13800000000"
        keyboardType="phone-pad"
      />
      <Text>验证码：</Text>
      <View style={styles.row}>
        <TextInput
          style={[styles.input, styles.codeInput]}
          value={code}
          onChangeText={setCode}
          placeholder="验证码"
          keyboardType="numeric"
        />
        <Button title="发送验证码" onPress={sendCode} disabled={!phone} />
      </View>
      <Button
        title="登录"
        onPress={login}
        disabled={!verificationInfo || !code}
      />
      {message && (
        <Text
          style={[
            styles.message,
            { color: message.includes("成功") ? "green" : "red" }
          ]}
        >
          {message}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  },
  row: {
    flexDirection: "row",
    alignItems: "center"
  },
  codeInput: {
    flex: 1,
    marginRight: 10
  },
  message: {
    marginTop: 20,
    textAlign: "center"
  }
});

邮箱验证码登录

使用 邮箱验证码登录 请先前往 身份认证/登录方式 开启 邮箱验证码

调用方式：

import cloudbase from "./utils/cloudbase";

const auth = cloudbase.auth();

// 发送验证码
const res = await auth.getVerification({ email });

// 登录
await auth.signInWithEmail({
  verificationInfo: res,
  verificationCode: code,
  email
});

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function EmailLogin() {
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [verificationInfo, setVerificationInfo] = useState(null);
  const [message, setMessage] = useState("");

  // 发送验证码
  const sendCode = async () => {
    try {
      const auth = cloudbase.auth();
      const res = await auth.getVerification({ email });
      setVerificationInfo(res);
      setMessage("验证码已发送！");
    } catch (error) {
      setMessage(`发送失败: ${error.message}`);
    }
  };

  // 登录
  const login = async () => {
    try {
      const auth = cloudbase.auth();
      await auth.signInWithEmail({
        verificationInfo,
        verificationCode: code,
        email
      });
      setMessage("登录成功！");
      Alert.alert("成功", "登录成功");
    } catch (error) {
      setMessage(`登录失败: ${error.message}`);
      Alert.alert("失败", `登录失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>邮箱：</Text>
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        placeholder="example@email.com"
        keyboardType="email-address"
      />
      <Text>验证码：</Text>
      <View style={styles.row}>
        <TextInput
          style={[styles.input, styles.codeInput]}
          value={code}
          onChangeText={setCode}
          placeholder="验证码"
          keyboardType="numeric"
        />
        <Button title="发送验证码" onPress={sendCode} disabled={!email} />
      </View>
      <Button
        title="登录"
        onPress={login}
        disabled={!verificationInfo || !code}
      />
      {message && (
        <Text
          style={[
            styles.message,
            { color: message.includes("成功") ? "green" : "red" }
          ]}
        >
          {message}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  },
  row: {
    flexDirection: "row",
    alignItems: "center"
  },
  codeInput: {
    flex: 1,
    marginRight: 10
  },
  message: {
    marginTop: 20,
    textAlign: "center"
  }
});

匿名登录

调用方式：

import cloudbase from "./utils/cloudbase";

const auth = cloudbase.auth();

await auth.signInAnonymously();

完整示例:

import React, { useState } from "react";
import { View, Button, Text, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function AnonymousLogin() {
  const [message, setMessage] = useState("");

  // 匿名登录
  const anonymousLogin = async () => {
    try {
      const auth = cloudbase.auth();
      await auth.signInAnonymously();
      setMessage("匿名登录成功！");
      Alert.alert("成功", "匿名登录成功");
    } catch (error) {
      setMessage(`登录失败: ${error.message}`);
      Alert.alert("失败", `登录失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="匿名登录" onPress={anonymousLogin} />
      {message && (
        <Text
          style={[
            styles.message,
            { color: message.includes("成功") ? "green" : "red" }
          ]}
        >
          {message}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: "center"
  },
  message: {
    marginTop: 20,
    textAlign: "center"
  }
});

文档型数据库

查询数据

调用方式：

import cloudbase from "./utils/cloudbase";

const db = cloudbase.database();
const res = await db.collection("{%TABLE_NAME%}").limit(10).get();

完整示例:

import React, { useState } from "react";
import { View, Text, Button, FlatList, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function QueryDocData() {
  const [dataList, setDataList] = useState([]);

  // 查询数据
  const getData = async () => {
    try {
      const db = cloudbase.database();
      const res = await db.collection("{%TABLE_NAME%}").limit(10).get();

      setDataList(res.data);
      Alert.alert("成功", "查询成功");
    } catch (error) {
      Alert.alert("错误", `查询失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="查询数据" onPress={getData} />
      {dataList.length > 0 ? (
        <FlatList
          data={dataList}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
            <View style={styles.item}>
              <Text>{JSON.stringify(item)}</Text>
            </View>
          )}
        />
      ) : (
        <Text>暂无数据</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  item: {
    padding: 10,
    marginVertical: 5,
    backgroundColor: "#f9f9f9",
    borderRadius: 5
  }
});

新增数据

调用方式：

import cloudbase from "./utils/cloudbase";

const db = cloudbase.database();
const res = await db.collection("{%TABLE_NAME%}").add({ title });

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function AddDocData() {
  const [title, setTitle] = useState("");

  // 新增数据
  const addData = async () => {
    try {
      const db = cloudbase.database();
      const res = await db.collection("{%TABLE_NAME%}").add({ title });

      Alert.alert("成功", `新增成功! id: ${res.id}`);
      setTitle("");
    } catch (error) {
      Alert.alert("错误", `新增失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>标题：</Text>
      <TextInput
        style={styles.input}
        value={title}
        onChangeText={setTitle}
        placeholder="请输入标题"
      />
      <Button title="新增数据" onPress={addData} disabled={!title} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  }
});

更新数据

调用方式：

import cloudbase from "./utils/cloudbase";

const db = cloudbase.database();
await db.collection("{%TABLE_NAME%}").doc(dataId).update({ title: newTitle });

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function UpdateDocData() {
  const [dataId, setDataId] = useState("");
  const [newTitle, setNewTitle] = useState("");

  // 更新数据
  const updateData = async () => {
    try {
      const db = cloudbase.database();
      await db
        .collection("{%TABLE_NAME%}")
        .doc(dataId)
        .update({ title: newTitle });

      Alert.alert("成功", "更新成功");
      setDataId("");
      setNewTitle("");
    } catch (error) {
      Alert.alert("错误", `更新失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>数据ID：</Text>
      <TextInput
        style={styles.input}
        value={dataId}
        onChangeText={setDataId}
        placeholder="请输入数据ID"
      />
      <Text>新标题：</Text>
      <TextInput
        style={styles.input}
        value={newTitle}
        onChangeText={setNewTitle}
        placeholder="请输入新标题"
      />
      <Button
        title="更新数据"
        onPress={updateData}
        disabled={!dataId || !newTitle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  }
});

删除数据

调用方式：

import cloudbase from "./utils/cloudbase";

const db = cloudbase.database();
await db.collection("{%TABLE_NAME%}").doc(dataId).remove();

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function DeleteDocData() {
  const [dataId, setDataId] = useState("");

  // 删除数据
  const deleteData = async () => {
    try {
      const db = cloudbase.database();
      await db.collection("{%TABLE_NAME%}").doc(dataId).remove();

      Alert.alert("成功", "删除成功");
      setDataId("");
    } catch (error) {
      Alert.alert("错误", `删除失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>数据ID：</Text>
      <TextInput
        style={styles.input}
        value={dataId}
        onChangeText={setDataId}
        placeholder="请输入要删除的数据ID"
      />
      <Button title="删除数据" onPress={deleteData} disabled={!dataId} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  }
});

云存储

上传文件

调用方式：

import cloudbase from "./utils/cloudbase";

const res = await cloudbase.uploadFile({
  cloudPath: cloudPath,
  filePath: asset.uri
});

完整示例:

import React, { useState } from "react";
import { View, Text, Button, StyleSheet, Alert } from "react-native";
import { launchImageLibrary } from "react-native-image-picker";
import cloudbase from "./utils/cloudbase";

export default function UploadFile() {
  const [fileId, setFileId] = useState("");

  // 上传文件
  const uploadFile = async () => {
    try {
      const result = await launchImageLibrary({
        mediaType: "photo",
        quality: 0.8
      });

      if (result.didCancel) {
        return;
      }

      if (result.errorCode) {
        Alert.alert("错误", "选择图片失败");
        return;
      }

      const asset = result.assets[0];
      const fileExtension = asset.fileName?.split(".").pop() || "jpg";
      const cloudPath = `images/${Date.now()}-${Math.random()}.${fileExtension}`;

      const res = await cloudbase.uploadFile({
        cloudPath: cloudPath,
        filePath: asset.uri
      });

      setFileId(res.fileID);
      Alert.alert("成功", "上传成功");
    } catch (error) {
      Alert.alert("错误", `上传失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="选择并上传图片" onPress={uploadFile} />
      {fileId && (
        <View style={styles.resultContainer}>
          <Text>上传成功！</Text>
          <Text>文件ID: {fileId}</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  resultContainer: {
    marginTop: 20,
    padding: 10,
    backgroundColor: "#f9f9f9",
    borderRadius: 5
  }
});

获取文件链接

调用方式：

import cloudbase from "./utils/cloudbase";

const res = await cloudbase.getTempFileURL({
  fileList: [fileId]
});

完整示例:

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  Button,
  Image,
  StyleSheet,
  Alert
} from "react-native";
import cloudbase from "./utils/cloudbase";

export default function GetFileUrl() {
  const [fileId, setFileId] = useState("");
  const [fileUrl, setFileUrl] = useState("");

  // 获取文件链接
  const getFileUrl = async () => {
    try {
      const res = await cloudbase.getTempFileURL({
        fileList: [fileId]
      });

      setFileUrl(res.fileList[0].tempFileURL);
      Alert.alert("成功", "获取成功");
    } catch (error) {
      Alert.alert("错误", `获取失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>文件ID：</Text>
      <TextInput
        style={styles.input}
        value={fileId}
        onChangeText={setFileId}
        placeholder="请输入文件ID (cloud://xxx.png)"
      />
      <Button title="获取文件链接" onPress={getFileUrl} disabled={!fileId} />
      {fileUrl && (
        <View style={styles.resultContainer}>
          <Text>文件链接：</Text>
          <Text>{fileUrl}</Text>
          <Image
            source={{ uri: fileUrl }}
            style={styles.image}
            resizeMode="contain"
          />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  },
  resultContainer: {
    marginTop: 20,
    padding: 10,
    backgroundColor: "#f9f9f9",
    borderRadius: 5
  },
  image: {
    width: "100%",
    height: 200,
    marginTop: 10
  }
});

下载文件

调用方式：

import cloudbase from "./utils/cloudbase";

const res = await cloudbase.downloadFile({
  fileID: fileId
});

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function DownloadFile() {
  const [fileId, setFileId] = useState("");
  const [localPath, setLocalPath] = useState("");

  // 下载文件
  const downloadFile = async () => {
    try {
      const res = await cloudbase.downloadFile({
        fileID: fileId
      });

      setLocalPath(res.tempFilePath);
      Alert.alert("成功", "下载成功");
    } catch (error) {
      Alert.alert("错误", `下载失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>文件ID：</Text>
      <TextInput
        style={styles.input}
        value={fileId}
        onChangeText={setFileId}
        placeholder="请输入文件ID (cloud://xxx.png)"
      />
      <Button title="下载文件" onPress={downloadFile} disabled={!fileId} />
      {localPath && (
        <View style={styles.resultContainer}>
          <Text>下载成功！</Text>
          <Text>本地路径: {localPath}</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  },
  resultContainer: {
    marginTop: 20,
    padding: 10,
    backgroundColor: "#f9f9f9",
    borderRadius: 5
  }
});

删除文件

调用方式：

import cloudbase from "./utils/cloudbase";

const res = await cloudbase.deleteFile({
  fileList: [fileId]
});

完整示例:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function DeleteFile() {
  const [fileId, setFileId] = useState("");

  // 删除文件
  const deleteFile = async () => {
    try {
      const res = await cloudbase.deleteFile({
        fileList: [fileId]
      });

      if (res.fileList[0].code === "SUCCESS") {
        Alert.alert("成功", "删除成功");
        setFileId("");
      } else {
        Alert.alert("失败", "删除失败");
      }
    } catch (error) {
      Alert.alert("错误", `删除失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text>文件ID：</Text>
      <TextInput
        style={styles.input}
        value={fileId}
        onChangeText={setFileId}
        placeholder="请输入文件ID (cloud://xxx.png)"
      />
      <Button title="删除文件" onPress={deleteFile} disabled={!fileId} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  }
});

云函数

调用方式：

import cloudbase from "./utils/cloudbase";

const res = await cloudbase.callFunction({
  name: "{%FUNCTION_NAME%}",
  data: {}
});

完整示例:

import React, { useState } from "react";
import { View, Text, Button, StyleSheet, Alert } from "react-native";
import cloudbase from "./utils/cloudbase";

export default function CallFunction() {
  const [result, setResult] = useState(null);

  // 调用云函数
  const callFunction = async () => {
    try {
      const res = await cloudbase.callFunction({
        name: "{%FUNCTION_NAME%}",
        data: {}
      });

      setResult(res.result);
      Alert.alert("成功", "调用成功");
    } catch (error) {
      Alert.alert("错误", `调用失败: ${error.message}`);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="调用云函数" onPress={callFunction} />
      {result && (
        <View style={styles.resultContainer}>
          <Text>返回结果：</Text>
          <Text>{JSON.stringify(result)}</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  resultContainer: {
    marginTop: 20,
    padding: 10,
    backgroundColor: "#f9f9f9",
    borderRadius: 5
  }
});

大模型

生文模型

调用方式：

import cloudbase from "./utils/cloudbase";

const ai = cloudbase.ai();
const model = ai.createModel("{%AI_MODEL_NAME%}");

// 确保已登录
const loginState = await cloudbase.auth().getLoginState();
if (!loginState) {
  await cloudbase.auth().signInAnonymously();
}

const res = await model.streamText({
  model: "{%AI_SUB_MODEL_NAME%}",
  messages: [
    {
      role: "system",
      content:
        "请严格按照七言绝句或七言律诗的格律要求创作，平仄需符合规则，押韵要和谐自然，韵脚字需在同一韵部。"
    },
    { role: "user", content: input }
  ]
});

for await (let str of res.textStream) {
  // 处理流式响应
}

完整示例:

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  Button,
  StyleSheet,
  Alert,
  ActivityIndicator
} from "react-native";
import cloudbase from "./utils/cloudbase";

export default function CallAIModel() {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");
  const [isGenerating, setIsGenerating] = useState(false);

  // 调用大模型
  const callAIModel = async () => {
    setIsGenerating(true);
    setResponse("");

    try {
      const ai = cloudbase.ai();
      const model = ai.createModel("{%AI_MODEL_NAME%}");

      // 确保已登录
      const loginState = await cloudbase.auth().getLoginState();
      if (!loginState) {
        await cloudbase.auth().signInAnonymously();
      }

      const res = await model.streamText({
        model: "{%AI_SUB_MODEL_NAME%}",
        messages: [
          {
            role: "system",
            content:
              "请严格按照七言绝句或七言律诗的格律要求创作，平仄需符合规则，押韵要和谐自然，韵脚字需在同一韵部。"
          },
          { role: "user", content: input }
        ]
      });

      for await (let str of res.textStream) {
        setResponse(prev => prev + str);
      }

      Alert.alert("成功", "生成完成");
    } catch (err) {
      Alert.alert("错误", `生成失败: ${err.message}`);
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text>输入主题：</Text>
      <TextInput
        style={styles.input}
        value={input}
        onChangeText={setInput}
        placeholder="请输入主题，如：春天"
      />
      <Button
        title="生成内容"
        onPress={callAIModel}
        disabled={!input || isGenerating}
      />
      {isGenerating && <ActivityIndicator size="large" style={styles.loader} />}
      {response && (
        <View style={styles.resultContainer}>
          <Text>生成结果：</Text>
          <Text>{response}</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5
  },
  loader: {
    marginVertical: 20
  },
  resultContainer: {
    marginTop: 20,
    padding: 10,
    backgroundColor: "#f9f9f9",
    borderRadius: 5
  }
});

生图模型

生图模型通过调用云函数来实现，在生图模型页面点击「一键创建云函数」，函数调用示例如下：

调用方式：

import cloudbase from "./utils/cloudbase";

const res = await cloudbase.callFunction({
  name: "<YOUR_FUNCTION_NAME>",
  data: { prompt: "一只可爱的猫咪在阳光下玩耍" }
});

if (res.result.success) {
  console.log("图片URL:", res.result.imageUrl);
  console.log("优化后的提示词:", res.result.revised_prompt);
} else {
  console.error("生成失败:", res.result.code, res.result.message);
}

完整示例:

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  Button,
  Image,
  StyleSheet,
  Alert,
  ActivityIndicator
} from "react-native";
import cloudbase from "./utils/cloudbase";

export default function GenerateImage() {
  const [prompt, setPrompt] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [revisedPrompt, setRevisedPrompt] = useState("");
  const [isGenerating, setIsGenerating] = useState(false);

  // 生成图片
  const generateImage = async () => {
    setIsGenerating(true);
    setImageUrl("");
    setRevisedPrompt("");

    try {
      const res = await cloudbase.callFunction({
        name: "<YOUR_FUNCTION_NAME>",
        data: { prompt }
      });

      if (res.result.success) {
        setImageUrl(res.result.imageUrl);
        setRevisedPrompt(res.result.revised_prompt || "");
        Alert.alert("成功", "图片生成成功");
      } else {
        Alert.alert(
          "失败",
          `生成失败: ${res.result.code} - ${res.result.message}`
        );
      }
    } catch (err) {
      Alert.alert("错误", `生成失败: ${err.message}`);
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text>输入描述：</Text>
      <TextInput
        style={styles.input}
        value={prompt}
        onChangeText={setPrompt}
        placeholder="例如：一只可爱的猫咪在阳光下玩耍"
        multiline
      />
      <Button
        title="生成图片"
        onPress={generateImage}
        disabled={!prompt || isGenerating}
      />
      {isGenerating && <ActivityIndicator size="large" style={styles.loader} />}
      {imageUrl && (
        <View style={styles.resultContainer}>
          <Text style={styles.label}>生成结果：</Text>
          <Image
            source={{ uri: imageUrl }}
            style={styles.image}
            resizeMode="contain"
          />
          {revisedPrompt && (
            <View style={styles.promptContainer}>
              <Text style={styles.label}>优化后的提示词：</Text>
              <Text>{revisedPrompt}</Text>
            </View>
          )}
          <Text style={styles.note}>注意：图片URL有效期为24小时</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  input: {
    minHeight: 80,
    borderColor: "#ccc",
    borderWidth: 1,
    marginVertical: 10,
    paddingHorizontal: 10,
    paddingVertical: 10,
    borderRadius: 5,
    textAlignVertical: "top"
  },
  loader: {
    marginVertical: 20
  },
  resultContainer: {
    marginTop: 20,
    padding: 10,
    backgroundColor: "#f9f9f9",
    borderRadius: 5
  },
  label: {
    fontWeight: "bold",
    marginBottom: 5
  },
  image: {
    width: "100%",
    height: 300,
    marginVertical: 10
  },
  promptContainer: {
    marginTop: 10
  },
  note: {
    marginTop: 10,
    fontSize: 12,
    color: "#666",
    fontStyle: "italic"
  }
});