在Vega中实现交互式toast通知

在本文中，您将实现一个吸引人的toast通知系统，该系统会提醒用户注意可用内容，并允许他们按住播放/暂停按钮直接开始流媒体播放。该解决方案演示如何使用针对电视优化的交互式toast来修改Vega视频示例应用，在不中断观看体验的情况下促进应用内内容的发现。

先决条件

Vega开发环境已设置
Vega Video示例应用已安装和配置
React Native和TypeScript的基础知识

安装所需的依赖项

将toast消息库添加到您的项目中。

npm install react-native-toast-message@^2.2.0

创建自定义toast组件

为针对电视优化的toast组件创建一个新文件，在用户交互期间显示进度条。使用以下实现创建src/components/ProgressToast.tsx。

import React from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';
import { BaseToast, ToastProps } from 'react-native-toast-message';

interface ProgressToastProps extends ToastProps {
  props?: {
    progress?: number;
    isHolding?: boolean;
  };
}

export const ProgressToast: React.FC<ProgressToastProps> = ({ props, text1, text2, ...rest }) => {
  const progress = props?.progress ?? 0;
  const isHolding = props?.isHolding ?? false;

  return (
    <View style={styles.toastContainer}>
      <Text style={styles.instructionText}>
        {text1 || 'Hold ⏯️ to start...'}
      </Text>
      
      {text2 && (
        <Text style={styles.secondaryText}>
          {text2}
        </Text>
      )}

      <View style={styles.progressBackground}>
        <Animated.View
          style={[
            styles.progressFill,
            {
              width: `${progress * 100}%`,
              backgroundColor: isHolding ? '#00ff00' : '#007bff',
            }
          ]}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  toastContainer: {
    position: 'absolute',
    top: '20%',
    right: '2%',
    width: 480,
    backgroundColor: 'rgba(26, 26, 26, 0.95)',
    borderRadius: 8,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 6,
    elevation: 10,
    borderWidth: 1,
    borderColor: 'rgba(0, 123, 255, 0.3)',
  },
  instructionText: {
    fontSize: 22,
    fontWeight: '600',
    color: '#ffffff',
    textAlign: 'center',
    marginBottom: 8,
    textShadowColor: 'rgba(0, 0, 0, 0.8)',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
  },
  secondaryText: {
    fontSize: 20,
    fontWeight: '500',
    color: '#e0e0e0',
    textAlign: 'center',
    marginBottom: 12,
    textShadowColor: 'rgba(0, 0, 0, 0.8)',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 2,
  },
  progressBackground: {
    width: '100%',
    height: 12,
    backgroundColor: '#333333',
    borderRadius: 6,
    overflow: 'hidden',
    marginTop: 4,
  },
  progressFill: {
    height: '100%',
    borderRadius: 6,
  },
});

export const toastConfig = {
  progress: (props: ProgressToastProps) => <ProgressToast {...props} />,
};

该组件在屏幕右侧创建一个带有实时进度反馈的矩形toast。当用户主动按住按钮时，进度条从蓝色变为绿色。

创建长按挂钩

创建自定义挂钩，管理播放/暂停按钮交互的完整生命周期和toast可见性。使用以下实现创建src/hooks/useLongPressToast.tsx。

import { useState, useRef, useCallback, useEffect } from 'react';
import { useTVEventHandler } from '@amazon-devices/react-native-kepler';
import Toast from 'react-native-toast-message';

export type TVButtonType = 'playpause' | 'select' | 'menu' | 'back' | 'up' | 'down' | 'left' | 'right';

interface UseLongPressToastProps {
  onLongPressComplete: () => void;
  targetButton?: TVButtonType;
  autoShowDelay?: number;
  longPressDuration?: number;
  toastTimeout?: number;
  initialText?: string;
  holdingText?: string;
  secondaryText?: string;
  completionText?: string;
  isScreenFocused?: boolean;
}

interface LongPressState {
  isHolding: boolean;
  progress: number;
  toastVisible: boolean;
  hasAutoShown: boolean;
  hasCompleted: boolean;
}

export const useLongPressToast = ({
  onLongPressComplete,
  targetButton = 'playpause',
  autoShowDelay = 5000,
  longPressDuration = 2000,
  toastTimeout = 5000,
  initialText = 'Hold Button to Continue',
  holdingText = 'Keep Holding...',
  secondaryText,
  completionText = 'Action Completed',
  isScreenFocused = true
}: UseLongPressToastProps) => {
  const [state, setState] = useState<LongPressState>({
    isHolding: false,
    progress: 0,
    toastVisible: false,
    hasAutoShown: false,
    hasCompleted: false,
  });

  const progressIntervalRef = useRef<NodeJS.Timeout | null>(null);
  const autoShowTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const toastTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const holdStartTimeRef = useRef<number>(0);
  const isProgressCompleteRef = useRef<boolean>(false);
  const toastVisibleRef = useRef<boolean>(false);

  const showInitialToast = useCallback(() => {
    if (state.toastVisible || state.hasAutoShown || state.hasCompleted) return;

    Toast.show({
      type: 'progress',
      text1: initialText,
      text2: secondaryText,
      visibilityTime: toastTimeout,
      autoHide: false,
      props: {
        progress: 0,
        isHolding: false,
      },
    });

    setState(prev => ({
      ...prev,
      toastVisible: true,
      hasAutoShown: true,
    }));

    toastVisibleRef.current = true;

    toastTimeoutRef.current = setTimeout(() => {
      hideToast();
    }, toastTimeout);
  }, [state.toastVisible, state.hasAutoShown, state.hasCompleted, toastTimeout, initialText, secondaryText]);

  const hideToast = useCallback(() => {
    if (toastTimeoutRef.current) {
      clearTimeout(toastTimeoutRef.current);
      toastTimeoutRef.current = null;
    }

    Toast.hide();
    setState(prev => ({
      ...prev,
      toastVisible: false,
    }));

    toastVisibleRef.current = false;
  }, []);

  const startProgress = useCallback(() => {
    if (state.isHolding) return;

    if (toastTimeoutRef.current) {
      clearTimeout(toastTimeoutRef.current);
      toastTimeoutRef.current = null;
    }

    holdStartTimeRef.current = Date.now();
    isProgressCompleteRef.current = false;

    setState(prev => ({
      ...prev,
      isHolding: true,
      progress: 0,
      toastVisible: true,
    }));

    toastVisibleRef.current = true;

    progressIntervalRef.current = setInterval(() => {
      const elapsed = Date.now() - holdStartTimeRef.current;
      const newProgress = Math.min(elapsed / longPressDuration, 1);

      setState(prev => ({
        ...prev,
        progress: newProgress,
      }));

      Toast.show({
        type: 'progress',
        text1: holdingText,
        text2: secondaryText,
        autoHide: false,
        props: {
          progress: newProgress,
          isHolding: true,
        },
      });

      if (newProgress >= 1 && !isProgressCompleteRef.current) {
        isProgressCompleteRef.current = true;
        completeProgress();
      }
    }, 50);
  }, [state.isHolding, longPressDuration, holdingText, secondaryText]);

  const stopProgress = useCallback(() => {
    if (!state.isHolding) return;

    if (progressIntervalRef.current) {
      clearInterval(progressIntervalRef.current);
      progressIntervalRef.current = null;
    }

    if (!isProgressCompleteRef.current) {
      hideToast();
    }

    setState(prev => ({
      ...prev,
      isHolding: false,
      progress: 0,
    }));
  }, [state.isHolding, hideToast]);

  const completeProgress = useCallback(() => {
    if (progressIntervalRef.current) {
      clearInterval(progressIntervalRef.current);
      progressIntervalRef.current = null;
    }

    if (completionText) {
      Toast.show({
        type: 'progress',
        text1: completionText,
        visibilityTime: 2000,
        props: {
          progress: 1,
          isHolding: false,
        },
      });
    }

    setState(prev => ({
      ...prev,
      isHolding: false,
      progress: 1,
      toastVisible: false,
      hasCompleted: true,
    }));

    toastVisibleRef.current = false;

    setTimeout(() => {
      onLongPressComplete();
    }, 500);
  }, [onLongPressComplete, completionText]);

  const handleTVEvent = useCallback((evt: any) => {
    if (evt.eventType !== targetButton || !toastVisibleRef.current) {
      return;
    }

    if (evt.eventKeyAction === 0) {
      startProgress();
    } else if (evt.eventKeyAction === 1) {
      stopProgress();
    }
  }, [startProgress, stopProgress, targetButton]);

  useTVEventHandler(handleTVEvent);

  useEffect(() => {
    if (!isScreenFocused) {
      return;
    }

    setState(prev => ({ ...prev, hasAutoShown: false }));

    autoShowTimeoutRef.current = setTimeout(() => {
      showInitialToast();
    }, autoShowDelay);

    return () => {
      if (autoShowTimeoutRef.current) {
        clearTimeout(autoShowTimeoutRef.current);
      }
    };
  }, [autoShowDelay, showInitialToast, isScreenFocused]);

  useEffect(() => {
    return () => {
      if (progressIntervalRef.current) {
        clearInterval(progressIntervalRef.current);
      }
      if (autoShowTimeoutRef.current) {
        clearTimeout(autoShowTimeoutRef.current);
      }
      if (toastTimeoutRef.current) {
        clearTimeout(toastTimeoutRef.current);
      }
    };
  }, []);

  return {
    isHolding: state.isHolding,
    progress: state.progress,
    toastVisible: state.toastVisible,
    hasAutoShown: state.hasAutoShown,
    showInitialToast,
    hideToast,
  };
};

这个挂钩可以管理自动吐司显示计时、流畅的进度动画、使用回调进行完成检测，以及使用Vega的TVEventHandler正确清理所有计时器和间隔。

注册toast组件

更新您的主应用组件以注册自定义toast配置。将以下导入内容添加到src/App.tsx。

import Toast from 'react-native-toast-message';
import { toastConfig } from './components/ProgressToast';

在应用返回语句中添加Toast组件。

const App = () => {
  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <NavigationContainer>
          <AppStack />
        </NavigationContainer>
        <Toast config={toastConfig} />
      </ThemeProvider>
    </Provider>
  );
};

将toast集成到屏幕中

要将长按toast挂钩添加到具有屏幕焦点跟踪功能的HomeScreen组件中，请将以下导入内容添加到src/screens/HomeScreen.tsx。

import { useLongPressToast } from '../hooks/useLongPressToast';
import { useIsFocused } from '@react-navigation/native';

在HomeScreen组件中添加挂钩。

// 假设tileData和Screens是在您的应用中定义的
const HomeScreen = ({ navigation }: AppStackScreenProps<Screens.HOME_SCREEN>) => {
  const isFocused = useIsFocused();

  const navigateToStream = useCallback(() => {
    const params = {
      data: tileData,
      sendDataOnBack: () => {},
    };

    try {
      navigation.navigate(Screens.PLAYER_SCREEN, params);
    } catch (error) {
      console.error('无法导航到流媒体：', error);
      navigation.goBack();
    }
  }, [navigation]);

  useLongPressToast({
    onLongPressComplete: navigateToStream,
    initialText: tileData.title + ' 即将开始！',
    holdingText: '持续按住...',
    secondaryText: '按住 ⏯️ 开始',
    completionText: 'Starting stream',
    isScreenFocused: isFocused,
  });

  // ... 现有HomeScreen代码的其余部分
};

isScreenFocused参数可确保toast仅在HomeScreen可见时出现，从而防止其在其他屏幕上显示。

测试实现

在Fire TV设备或模拟器上构建并运行您的应用：

导航到主屏幕。
等待五秒钟，toast会自动出现。
长按遥控器上的播放/暂停按钮。
观察进度条的两秒钟内填充情况。
提前松开即可取消，或在整个时间按住触发导航。

开发 Vega 应用

在Vega中实现交互式toast通知

先决条件

安装所需的依赖项

创建自定义toast组件

创建长按挂钩

注册toast组件

将toast集成到屏幕中

测试实现

相关内容

​先决条件

​安装所需的依赖项

​创建自定义toast组件

​创建长按挂钩

​注册toast组件

​将toast集成到屏幕中

​测试实现

​相关内容

先决条件

安装所需的依赖项

创建自定义toast组件

创建长按挂钩

注册toast组件

将toast集成到屏幕中

测试实现

相关内容