反应本机路由器通量自定义导航栏访问方法组件答案

【问题标题】：react native router flux custom navbar access to method component反应本机路由器通量自定义导航栏访问方法组件
【发布时间】：2017-11-29 12:25:48
【问题描述】：

我有一个带有自定义导航栏的场景

                <Scene
                      navBar={CustomNavBar}
                      component={MComponent}                   

                  />

MyCOmponent 有一个名为 _hello() 的方法

 export default class MComponentextends PureComponent {
      constructor(props) {
         super(props);     
     }
   _hello = () => {
    console.warn('HELLO WORLD')
}

是否可以在我的导航栏组件中调用 MyComponent _hello() 方法？

export default class CustomNavBar extends Component {
constructor(props) {
    super(props);
    this.state = {        
    };
    this.props._hello () // does not work
    }
}

【问题讨论】：

标签： reactjs react-native react-native-router-flux

【解决方案1】：

使用场景作为中介。

首先，在 Scene 中为 CustomNavBar 添加一个回调属性

<CustomNavBar cb={this._callback}>

然后为 MyComponent 设置 ref，也在 Scene 中

<MyComponent ref={(c)=>this._myComponent=c}>

当你想在 CustomNavBar 中调用 _hello 时，改为调用 cb

this.props.cb();

会调用Scene中的_callback，使用this._myComponent调用_hello

this._myComponent._hello()

【讨论】：

将 props 传递给 Scene CustomNavBar 抛出错误 => 检查 cardstack 的方法

【解决方案2】：

 <Scene 
navBar={CustomNavBar cb={this._callback}} 
component={MComponentef={(c)=>this._myComponent=c}}
/>

将 props 传递给 Scene CustomNavBar 抛出错误 => 检查 cardstack 的方法

【讨论】：