开播与收听（React Native）

# 1. 安装语聊核心及原生构建工具 (必选)
npx expo install react-native-tuikit-atomic-x expo-dev-client expo-build-properties

#2. 安装 UI 适配与工具库 (建议)
npx expo install react-native-safe-area-context react-native-toast-message react-native-localize

{
  "expo": {
    "name": "ExpoLive",
    "slug": "ExpoLive",
    // ... 其它设置项

    "ios": {
      // ... 其它设置项
      "bundleIdentifier": "com.anonymous.ExpoLive",
      "infoPlist": {
        "NSMicrophoneUsageDescription": "This app requires access to your microphone for live streaming.",
        "UIBackgroundModes": [
          "audio"
        ]
      }
    },
    "plugins": [
      "react-native-localize",
      
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
      
    ]
  }
}

# 本地已有 Android 和 iOS 的开发环境，则执行
npx expo run:ios    //保确已安装 CocoaPods
npx expo run:android

# 或者使用云打包重新生成开发版的安装包
npx eas build --profile development --platform all

npx expo start

import { useLiveSeatState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveSeatState';

// 定义语聊房 ID（需要与后续 createLive 中使用的 liveID 保持一致）
// liveID 由开发者自定义，建议使用唯一标识符（如 UUID 或时间戳组合）
// 格式要求：仅支持英文字母、数字、下划线，长度不超过 64 个字符
const liveID = 'your_live_room_id'; // 替换为您的语聊房 ID

// 使用 liveID 获取 LiveSeatState 实例
const { seatList } = useLiveSeatState(liveID);

import { useDeviceState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/DeviceState';

const { openLocalMicrophone } = useDeviceState();

const openMic = () => {
  openLocalMicrophone();
};

import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';

// 获取 LiveListState 实例
const { createLive } = useLiveListState();

const startLive = () => {
  createLive({
    liveInfo: {
      liveID: liveID, // 设置语聊的房间 id
      liveName: 'test', // 设置语聊的房间名称
      keepOwnerOnSeat: true, // 配置主播始终在麦位上
      isSeatEnabled: true,
      seatLayoutTemplateID: 70, // 麦位布局模板（例如 70 为语聊麦位模板）
      seatMode: 'APPLY', // 上麦模式，例如申请上麦
      maxSeatCount: 10 // 最大麦位数
    },
    onSuccess: () => {        
      console.log('创建语聊房成功');
      // 此处可进行页面跳转
    },
    onError: (error) => {
      console.log('创建语聊房失败', error);
    }
  });
};

import React, { useEffect } from 'react';
import { useLiveSeatState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveSeatState';

// 使用 liveID 获取 LiveSeatState 实例
const { seatList } = useLiveSeatState(liveID);

// 根据 displaySeats 去更新 UI
const displaySeats = React.useMemo(() => {
  return Array.from({ length: 10 }, (_, i) => {
    const foundSeat = (seatList || []).find(seat => seat.index === i) || {};
    
    return {
      ...foundSeat,
      displayIndex: i + 1, // UI 显示的序号 (1-10)
      userId: foundSeat.userInfo?.userID || foundSeat.userId || null,
    };
  });
}, [seatList]);


import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';

const { endLive } = useLiveListState();

// 结束语聊
const handleEndLive = () => {
    endLive({
      onSuccess: () => {        
        console.log('结束语聊成功');
        // 此处可进行页面跳转
      },
      onError: (error) => {
        console.log('结束语聊失败', error);
      }
    });
 }

import { useLiveSeatState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveSeatState';

// 定义语聊房 ID（需要与后续 joinLive 中使用的 liveID 保持一致）
const liveID = 'your_live_room_id'; // 替换为您的语聊房 ID

// 使用 liveID 获取 LiveSeatState 实例
const { seatList } = useLiveSeatState(liveID);

import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';

// 获取 LiveListState 实例
const { joinLive } = useLiveListState();

// 加入语聊
const handleJoinLive = () => {
    joinLive({
      liveID: liveID, // 想要加入语聊房的 liveID
      onSuccess: () => {        
        console.log('成功进入语聊房');
        // 此处可进行页面跳转
      },
      onError: (error) => {
        console.log('进入语聊房失败', error);
      }
    });
 };

import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';

// 获取 LiveListState 实例
const { leaveLive } = useLiveListState();

// 退出语聊房
const handleLeaveLive = () => {
    leaveLive({
      liveID: liveID, // 您当前加入语聊房的 liveID
      onSuccess: () => {        
        console.log('退出语聊房成功');
        // 此处可进行页面跳转
      },
      onError: (error) => {
        console.log('退出语聊房失败', error);
      }
    });
 }