React Native按钮点击触发浏览器打开网页异常求助

你当前代码的核心问题是：onPress={openURL('https://www.moodplan.net/skilldesmonats')}属于直接执行函数调用，组件渲染阶段就会触发openURL，而非等待按钮点击时执行。React的事件回调需要接收一个函数引用，而不是函数执行的结果。

提供两种可行的解决方式：

方案一：用箭头函数包裹调用逻辑 #

将openURL的调用放在箭头函数中，传递给onPress的是一个待执行的函数，点击时才会触发：

<TouchableOpacity style={styles.box} onPress={() => openURL('https://www.moodplan.net/skilldesmonats')}>
    <MaterialCommunityIcons name="diamond-stone" size={100} color="white" />
    <Text style={[Styles.text16B,{color:color.white}]}>
    Please open website
    </Text>
</TouchableOpacity>

方案二：改造openURL为高阶函数 #

让openURL返回一个回调函数，这样传递给onPress的就是函数引用，点击时才会执行内部的Linking.openURL：

// 改造后的openURL函数
const openURL = (url) => {
  return () => {
    Linking.openURL(url).catch((err) => console.error('An error occurred', err));
  }
}

// 使用方式保持不变
<TouchableOpacity style={styles.box} onPress={openURL('https://www.moodplan.net/skilldesmonats')}>
    <MaterialCommunityIcons name="diamond-stone" size={100} color="white" />
    <Text style={[Styles.text16B,{color:color.white}]}>
    Please open website
    </Text>
</TouchableOpacity>

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