消息分享

分享 通过该函数，可以显示原生分享面板，让用户轻松分享内容。例如，用户可以在已安装的应用列表中选择想要的应用（例如：Messenger、备忘录应用），分享邀请消息或文本信息。利用各平台（Android、iOS）默认提供的分享界面。

options.message 当向该属性传入要分享的消息时，会显示用户可以选择的应用列表。例如，当用户想分享文本消息或保存到备忘录应用时，这很有用。

签名

function share(message: { message: string }): Promise<void>;

参数

• options · 必填 · object

  这是一个包含要分享消息的对象。

  • options.message · 必填 · string

    这是要分享的文本字符串。例如，“你好！分享此内容。”

示例：实现分享功能

下面是一个点击按钮即可分享消息的简单示例。

js

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

async function handleShare() {
  try {
    await share({ message: '要分享的消息' });
    console.log('分享完成');
  } catch (error) {
    console.error('分享失败:', error);
  }
}

React

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

const ShareButton = () => {
  const handleShare = async () => {
    try {
      await share({ message: '要分享的消息' });
      console.log('分享完成');
    } catch (error) {
      console.error('分享失败:', error);
    }
  };

  return <button onClick={handleShare}>分享</button>;
};

React Native

import { share } from '@apps-in-toss/framework';
import { Button } from 'react-native';

function MyPage() {
  return <Button title="分享" onPress={() => share({ message: '这是要分享的消息。' })} />;
}

接收用户输入并分享消息

也可以实现分享用户直接输入的消息。以下是创建邀请消息功能的示例。

import { useState } from 'react';
import { TextInput, Button, View, Alert } from 'react-native';
import { share } from '@apps-in-toss/framework';

function ShareWithInput() {
  const [invitationMessage, setInvitationMessage] = useState(''); // [!code highlight]

  const handleShare = () => {
    if (!invitationMessage.trim()) {
      Alert.alert('请输入要分享的消息。');
      return;
    }
    share({ message: invitationMessage }); // [!code highlight]
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 10,
          paddingHorizontal: 8,
        }}
        placeholder="请输入邀请消息"
        value={invitationMessage}
        onChangeText={setInvitationMessage}
      />
      <Button title="分享邀请消息" onPress={handleShare} />
    </View>
  );
}

体验示例应用

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

QR 代码链接: intoss://with-share-text