如何从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) 
    } 
...

答

那是因为你试图从静态对象（更多关于此页上的静态方法：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动作）酒吧。

谢谢你的回答。不幸的是，在_test之前放置“静态”并不能解决问题，因为我仍然得到相同的错误。我试图做的是从导航栏发送一个动作。我注意到，我无法从静态路由中执行“this.dispatch”，这导致我创建了_test函数进行试验。 – GGBB

所以你应该创建新的组件（看看我上面的示例代码）并连接到redux。这将允许您发送操作。然后使用这个组件代替'navigationBar'中的'Text'' – mkatanski

谢谢！这是有道理的 – GGBB

如何从React native中的导航栏调用函数？

相关推荐