React Native如何自动触发按钮执行，启动WebBrowser？

要实现应用启动时自动执行浏览器打开逻辑，你可以利用React的useEffect钩子，它会在组件首次渲染完成后（对应应用打开的时机）触发指定函数。

修改步骤： #

1. 从react中导入useEffect
2. 添加useEffect钩子，在组件挂载时调用_handlePressButtonAsync函数

修改后的完整代码： #

import React, { useState, useEffect } 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 _handlePressButtonAsync = async () => {
    let result = await WebBrowser.openBrowserAsync('https://vitech-104517.square.site/');
    setResult(result);
  };

  // 组件挂载时自动执行浏览器打开逻辑
  useEffect(() => {
    _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',
  },
});

说明： #

• useEffect的第二个参数是一个空数组[]，这表示该副作用只在组件首次渲染（应用启动）时执行一次，不会随状态更新重复触发。
• 如果需要实现应用从后台切换回前台时也自动打开浏览器，可以结合AppState API监听状态变化，但当前需求只需要启动时触发，上述代码已足够满足。

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