网络

1. 检查网络连接状态（getNetworkStatus)

getNetworkStatus是获取设备当前网络连接状态的函数。返回值是 NetworkStatus 类型，用于表示是否连接互联网以及连接类型（Wi-Fi、移动数据等）。值如下之一。

• OFFLINE: 未连接互联网的状态。
• WIFI: 已连接到 Wi-Fi 的状态。
• 2G: 已连接到 2G 网络的状态。
• 3G: 已连接到 3G 网络的状态。
• 4G: 已连接到 4G 网络的状态。
• 5G: 已连接到 5G 网络的状态。
• WWAN: 虽然已连接互联网，但无法得知连接类型（Wi-Fi、2G~5G）的状态。此状态仅可在 iOS 上确认。
• UNKNOWN: 无法得知互联网连接状态的状态。此状态仅可在 Android 上确认。

签名

function getNetworkStatus(): Promise<NetworkStatus>;

返回值

• Promise<NetworkStatus>

  返回网络状态。

示例

这是一个获取网络连接状态并显示在屏幕上的示例。

import { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import { getNetworkStatus, NetworkStatus } from '@apps-in-toss/framework';

function GetNetworkStatus() {
  const [status, setStatus] = useState<NetworkStatus | ''>('');

  useEffect(() => {
    async function fetchStatus() {
      const networkStatus = await getNetworkStatus();
      setStatus(networkStatus);
    }

    fetchStatus();
  }, []);

  return (
    <View>
      <Text>当前网络状态：{status}</Text>
    </View>
  );
}

体验示例应用

apps-in-toss-examples 在仓库中 with-network-status 下载代码，或扫描下方二维码亲自体验。

二维码链接：intoss://with-network-status

---

2. 进行 HTTP 通信

介绍在 Bedrock 中进行网络通信的方法。

使用 Fetch API

在 Bedrock 中，像 React Native 一样 Fetch API可以使用它进行网络通信。Fetch API 是一种标准 Web API，可以简单实现异步网络请求。

以下是使用获取“待办事项列表”的 API，在“待办事项”完成时显示删除线的示例。

pages/index.tsx

import { createRoute } from '@granite-js/react-native';
import { useCallback, useState } from 'react';
import { Button, ScrollView } from 'react-native';
import { Todo, TodoItem } from './Todo';

export const Route = createRoute('/', {
  component: Index,
});

function Index() {
  const [todos, setTodos] = useState<TodoItem[]>([]);
  // [!code highlight:10]
  const handlePress = useCallback(async () => {
    /**
     * 从 JSONPlaceholder API 获取待办事项数据。
     * @link https://jsonplaceholder.typicode.com/
     */
    const result = await fetch('https://jsonplaceholder.typicode.com/todos');
    const json = await result.json(); // 将响应数据转换为 JSON。
    setTodos(json); // 将获取到的数据保存到状态中。
  }, []);

  return (
    <>
      <Button title="查看待办事项列表" onPress={handlePress} />
      <ScrollView>
        {todos.map((todo) => {
          return <Todo key={todo.id} id={todo.id} title={todo.title} completed={todo.completed} />;
        })}
      </ScrollView>
    </>
  );
}

Todo.tsx

import { Flex } from '@granite-js/react-native';
import { Text } from 'react-native';

export interface TodoItem {
  title: string; // 待办事项标题
  id: number; // 待办事项 ID
  completed: boolean; // 完成与否
}

export function Todo({ title, id, completed: done }: TodoItem) {
  return (
    <Flex direction="row" key={id}>
      <Flex.CenterVertical
        style={{
          minWidth: 30,
        }}
      >
        <Text style={{ fontSize: 24 }}>{id}.</Text>
      </Flex.CenterVertical>
      <Flex.CenterVertical>
        <Text
          style={{
            fontSize: 16,
            textDecorationColor: 'red', // 删除线颜色
            textDecorationLine: done ? 'line-through' : 'none', // 根据完成与否显示删除线
          }}
        >
          {title}
        </Text>
      </Flex.CenterVertical>
    </Flex>
  );
}

观看示例视频可见，点击按钮后会发起网络请求，屏幕上会显示待办事项列表。网络请求发生时，可以在网络检查器中查看请求和响应。

观看视频

使用其他库

React Native 支持 XMLHttpRequest API。因此，也可以使用采用此 API 的第三方网络库。

更多详情请参见 React Native 官方文档。

---

3. 获取服务器时间（getServerTime)

getServerTime 函数是获取基于 Toss 应用服务器当前时间的 API。它返回的不是设备时间，而是 服务器时间（Server Time） ，因此有助于防止因客户端时间篡改而导致的重复领取奖励或作弊。

签到、活动期间校验、判断是否可领取奖励等 对时间可信度要求高的逻辑都可以使用。

请参考

• 返回的时间为 Unix timestamp（毫秒单位） 格式。
• 在不支持的应用版本中 undefined可能会返回。
• 使用前 getServerTime.isSupported()以 建议先确认版本是否支持。

签名

function getServerTime(): Promise<number | undefined>;

返回值

• Promise<number | undefined>

  将 Toss 应用服务器的当前时间以 Unix timestamp 毫秒单位返回。（例如： 1705123456789) 在不支持的版本中 undefined则返回。

示例

React

import { getServerTime } from '@apps-in-toss/web-framework';

async function checkRewardEligibility() {
  // 建议先执行版本检查。
  if (!getServerTime.isSupported()) {
    console.log('此功能在该版本中不受支持。');
    return;
  }

  const serverTime = await getServerTime();
  const rewardDeadline = 1705200000000;

  if (serverTime && serverTime > rewardDeadline) {
    console.log('奖励领取期限已过。');
  }
}

React Native

import { getServerTime } from '@apps-in-toss/framework';

async function checkRewardEligibility() {
  // 建议先执行版本检查。
  if (!getServerTime.isSupported()) {
    console.log('此功能在该版本中不受支持。');
    return;
  }

  const serverTime = await getServerTime();
  const rewardDeadline = 1705200000000;

  if (serverTime && serverTime > rewardDeadline) {
    console.log('奖励领取期限已过。');
  }
}