如何從React native中的導航欄調用函數？

我想創建一個屏幕，點擊標題調用函數。下面的代碼給出了錯誤「undefined不是函數（評估_this2._test（）」）如何從React native中的導航欄調用函數？

當我在類Home之外定義_test時，我可以調用函數（但_test不能再訪問this.props ）。

另外，我能夠通過使用this._test調用從渲染功能_test（）。

看起來這可能是一個問題與「本」，但我想不出有什麼問題可以幫到你嗎？

@connect(data => Home.getDataProps(data)) 
export default class Home extends React.Component { 

    static route = { 
    navigationBar: { 
     title: <Text onPress={()=>{this._test()}}>Home</Text> 
    } 
    } 

    _test =() => { 
    console.log("TEST SUCCESS") 
    console.log(this.props) 
    } 
...

來源

2017-08-13 GGBB

那是因爲你試圖從靜態對象（更多關於此頁上的靜態方法：MDN static）調用方法，它屬於類本身，而不是類的實例。也許你應該改變test()方法也是靜態的。你不能從靜態方法調用非靜態方法，但是你可以做相反的事情，從實例調用靜態方法。

此外，<Text />組件不在您的<Home />組件內呈現。那就是爲什麼它是一個靜態對象。這就是爲什麼你無法使用this運算符訪問<Home />組件方法。 This操作員指向route對象，而不是您的組件。它只是一個列出需要渲染的組件的配置。

您可以使用例如redux操作來建立component to component通信。

我不確定你想要完成什麼，但最好使用自己的組件而不是<Text />，它可以在按下<Text />組件的同時調度redux動作。例如：

... 
import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import onTextPress from './redux/actions' 
... 

class MyText extends Component { 

    render() { 
    return (
     <Text onPress={() => this.props.onTextPress()} /> 
    ) 
    } 
} 

export default connect(null, { onTextPress })(MyText)

，當然還有你的<Home />組件連接到Redux的處理髮生在終極版店內的變化。

編輯：在你家組件必須修改static route對象使用新的，自定義組件：從導航中

... 
import MyText from './components/MyText' 
... 

export default class Home extends React.Component { 

    static route = { 
    navigationBar: { 
     title: <MyText /> 
    } 
    } 
...

這將允許您派遣任何操作（在我的例子onTextPress動作）酒吧。

來源

2017-08-13 20:02:26 mkatanski

謝謝你的回答。不幸的是，在_test之前放置「靜態」並不能解決問題，因爲我仍然得到相同的錯誤。我試圖做的是從導航欄發送一個動作。我注意到，我無法從靜態路由中執行「this.dispatch」，這導致我創建了_test函數進行試驗。 – GGBB

所以你應該創建新的組件（看看我上面的示例代碼）並連接到redux。這將允許您發送操作。然後使用這個組件代替'navigationBar'中的'Text'' – mkatanski

謝謝！這是有道理的 – GGBB

如何從React native中的導航欄調用函數？

回答

相關問題