React Native中如何自动触发按钮点击或运行函数？

要实现组件挂载后自动触发打开指定网站的功能，你可以通过useEffect钩子调用_handlePressButtonAsync函数，注意以下关键细节：

1. useEffect回调不能直接定义为异步函数，需在内部创建异步函数并调用，或用.then()处理异步逻辑
2. 给useEffect传入空依赖数组[]，确保仅在组件首次挂载时执行一次
3. 可通过useRef添加执行标记，避免组件重新渲染时重复触发操作

修改后的完整代码如下：

import React, { useState, useEffect, useRef } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import Constants from 'expo-constants';

export default function App() {
  const [result, setResult] = useState(null);
  const hasTriggered = useRef(false); // 标记是否已执行过打开操作

  const _handlePressButtonAsync = async () => {
    let result = await WebBrowser.openBrowserAsync('https://vitech-104517.square.site/');
    setResult(result);
  };

  useEffect(() => {
    // 仅在组件首次挂载时触发
    if (!hasTriggered.current) {
      hasTriggered.current = true;
      _handlePressButtonAsync();
    }
  }, []);

  return (
    <View style={styles.container}>
      <Button title="Open WebBrowser" onPress={_handlePressButtonAsync} />
      <Text>{result && JSON.stringify(result)}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

核心说明： #

• useRef的hasTriggered用于记录操作执行状态，避免组件因状态更新重新渲染时重复打开浏览器
• 空依赖数组[]保证useEffect仅在组件挂载阶段运行一次
• 直接在useEffect内部调用异步函数，React 18+版本中该写法完全兼容

内容的提问来源于stack exchange，提问作者Ryan Pflum