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