跳到主要内容

React Native 快速开始

准备工作​

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

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

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

添加 CloudBase AI 开发插件​

可选：如果你使用 AI 编程助手（如 Cursor、Claude Code、CodeBuddy 等）进行开发，建议先完成本步骤，让 AI 具备 CloudBase 开发能力。

复制 AI Prompt 粘贴到 AI IDE​

在 AI 对话中输入：

帮我把 CloudBase 接好，按下面做：
1. 打开 https://docs.cloudbase.net/skill.md，按说明完成接入。
2. 接入完成后告诉我，并建议最相关的下一步。

查看 skill.md →

使用 Skills 开发​

对 AI 说：

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

Skills 使用文档 →

也可以手动安装 CloudBase Skills：

npx skills add tencentcloudbase/cloudbase-skills -y

安装 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 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 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.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
  }
});