TouchableHighlight onPress在导航上自动触发

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}>