开播与观看（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",
    // ... Other Configurations

    "ios": {
      // ... Other Configurations
      "bundleIdentifier": "com.anonymous.ExpoLive",
      "infoPlist": {
        "NSMicrophoneUsageDescription": "This app requires access to your microphone for live streaming.",
        "NSCameraUsageDescription": "This app requires access to your camera 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 { LiveCoreView } from 'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';

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

  return (
    <View style={styles.container}>
      <LiveCoreView liveId={liveID} coreViewType="pushView" style={styles.pushView} />
    </View>
  );
}

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

const { openLocalCamera, openLocalMicrophone } = useDeviceState();

useEffect(() => {
  openLocalMicrophone({
    onSuccess: () => { console.log('麦克风打开成功'); },
    onError: (error) => { console.log('麦克风打开失败', error); },
  });
  openLocalCamera({
    isFront: true,
    onSuccess: () => { console.log('摄像头打开成功'); },
    onError: (error) => { console.log('摄像头打开失败', error); },
  });
}, []);

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

const { createLive } = useLiveListState();

const startLive = () => {
  createLive({
    liveInfo: {
      liveID: liveID, // 设置直播的房间 id
      liveName: 'live name', // 设置直播的房间名称
      seatLayoutTemplateID: 600, // 配置布局模板，默认：600 动态宫格布局
      keepOwnerOnSeat: true, // 配置主播始终在麦位上
    },
    onSuccess: () => { console.log('创建直播间成功'); },
    onError: (error) => { console.log('创建直播间失败', error); },
  });
};

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 { LiveCoreView } from 'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';

export default function YourAudienceScreen({ route, navigation }) {
  const { liveID } = route.params || {};

  return (
    <View style={styles.container}>
      <LiveCoreView liveId={liveID} coreViewType="playView" style={styles.playView} />
    </View>
  );
}

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

export default function YourAudienceScreen({ route, navigation }) {
  const { liveID } = route.params || {};
  const { joinLive } = useLiveListState();

  useEffect(() => {
    joinLive({
      liveID: liveID,
      onSuccess: () => { console.log('加入直播间成功'); },
      onError: (error) => { console.log('加入直播间失败', error); },
    });
  }, []);
}

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

const { leaveLive } = useLiveListState();

// 离开直播
const handleLeaveLive = () => {
  leaveLive({
    onSuccess: () => { console.log('离开直播间成功'); },
    onError: (error) => { console.log('离开直播间失败', error); },
  });
};