可触摸突出显示 on按在导航时自动触发

Question

我在我的反应本机应用程序中有两个视图，我使用reactnavigtion转到第二个视图。 下面是该代码。

<TouchableHighlight onPress={() => navigate('Detail', { title: 'Text' })}>
<View style={styles.box} >
</View>
</TouchableHighlight>

上面的代码工作正常。 在第二个视图中，我添加了链接，当用户点击它时会在 Web 浏览器中打开它。

<TouchableHighlight onPress={this._onPressButton('http://www.someurl.com')}>
<View style={styles.box} >
</View>
</TouchableHighlight>

以下是方法。

_onPressButton(url){
const uri = url;
Linking.openURL(uri).catch(err => console.error('An error occurred', err));
}

问题是当我单击以转到第二个视图时。 它也会自动触发第二个视图_onPressButton函数。 这在iOS和Android中都会发生。

Answer 1

你使用的语法会在每次渲染时调用该函数，这就是它立即触发的原因。您必须将其放入匿名函数或为其创建一个方法。

<TouchableHighlight onPress={() => this._onPressButton('http://www.someurl.com')}>

或定义使用该参数的方法

<TouchableHighlight onPress={this.navigateToSomeURL}>