如何在React Native应用的特定页面自动弹出Alert提示（无需点击按钮）

要实现进入指定页面时自动弹出Alert，无需点击按钮，可通过React的useEffect钩子结合React Navigation的页面焦点监听来完成，以下是修改后的代码及说明：

import React, { useEffect } from "react";
import { View, Text, Alert } from 'react-native'
import { Ionicons } from '@expo/vector-icons';

const AlertTest = ({ navigation }) =>{
  useEffect(() => {
    // 首次进入页面时弹出Alert
    Alert.alert(
      '页面提示',
      '你已进入AlertTest页面',
      [{ text: '确认' }],
      { cancelable: false }
    );

    // 监听页面焦点事件，每次页面获得焦点（包括从其他页面返回）时触发Alert
    const unsubscribeFocus = navigation.addListener('focus', () => {
      Alert.alert(
        '页面提示',
        'AlertTest页面已激活',
        [{ text: '确认' }],
        { cancelable: false }
      );
    });

    // 组件卸载时移除监听，避免内存泄漏
    return unsubscribeFocus;
  }, [navigation]);

  return (
    <View style={{
      backgroundColor: '#f1f1f1',
      justifyContent: 'center',
      alignItems: 'center',
      flex: 1 // 添加flex:1让View占满屏幕
    }}>
      <Ionicons color="black" name="tv" size={100}/>
      <Text>Hello World </Text>
    </View>
  );
}

export default AlertTest;

关键说明： #

• 基础触发：useEffect会在组件挂载（首次进入页面）时执行内部代码，直接调用Alert.alert即可弹出提示。
• 焦点监听：使用navigation.addListener('focus')可以监听页面的焦点状态，确保**每次进入该页面（包括从其他页面返回）**都会触发Alert，完全符合需求。
• 内存管理：useEffect返回的函数会在组件卸载时执行，用于移除焦点监听，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Rahul Aadam