React-Native Redux Navigation,onEnter onLeave

时间:2016-09-22 16:42:45

标签: navigation react-native redux

我试图在导航中调用子功能。这样就可以在导航使用的视图中使用onEnter / onLeave函数。但是,在使用Redux时,我无法弄清楚如何访问这些函数。

constructor(props) {
    super(props);
    this.state = {
      viewState: VIEWSTATE_NONE,
      isConnected: true,
    };
    this._routes = [
        // HERE ARE THE VIEWS
      <View></View>,
      <ViewVersion onComplete={this._versionComplete.bind(this)} />,
      <ViewError onSubClickPrev={this.onSubClickPrev.bind(this)} />,
      <ViewLogin onComplete={this._loginComplete.bind(this)} />,
      <ViewLoginCustomer onSubClickPrev={this.onSubClickPrev.bind(this)} />,
      <ViewMain onSubClickPrev={this.onSubClickPrev.bind(this)} />,
    ];
}


  onSubClickGoto(goto){
    this.setState({viewState: goto});
    this._isErrorVisible = false;
    var routesHistory = this.refs.navBase.getCurrentRoutes();
    for(var i = 0; i < routesHistory.length; i++){

      // I CANNOT GET MY NAVIGATION VIEW CLASS HERE
      var view = this._routes[routesHistory[i].index];
      console.log("check obj "+ view + " - " + view.getWrappedInstance); // getWrappedInstance returns undefined
      if(view.getWrappedInstance!=null&&view.getWrappedInstance().onLeave!=null)
        view.getWrappedInstance().onLeave();
    }
    switch(goto){
      case VIEWSTATE_VERSION:
        this.refs.navBase.push({index:1});
        break;
      case VIEWSTATE_ERROR:
        this.refs.navBase.push({index:2});
        break;
      case VIEWSTATE_LOGIN:
        this.refs.navBase.push({index:3});
        break;
      case VIEWSTATE_CUSTOMER:
        this.refs.navBase.push({index:4});
        break;
      case VIEWSTATE_MAIN:
        this.refs.navBase.push({index:5});
        break;
    }
  }


  _renderNavigationBase(route, navigator){
    console.log("render: ", route);
    return this._routes[route.index];
  }

  _configureNavigationBase(route, routeStack){
    console.log("configure: ", route);
    /*
    switch (route.index) {
      case 1:
        return Navigator.SceneConfigs.FloatFromLeft;
      case 2:
        return Navigator.SceneConfigs.FloatFromRight;

    }
    */
    return Navigator.SceneConfigs.FloatFromRight;
  }

  render() {
    return (
      <View style={styles.view} >
        <Navigator
          ref="navBase"
          initialRoute={{index:0}}
          configureScene={this._configureNavigationBase.bind(this)}
          renderScene={this._renderNavigationBase.bind(this)} />
      </View>
    )
  }

添加到导航中的视图示例。

class ViewLogin extends Component {
    onLeave(){
      console.log("DISMISS ");
      dismissKeyboard();
    }
}

ViewLogin.contextTypes = {
    store: PropTypes.object
};
export default connect(mapStateToProps,mapDispatchToProps,null,{withRef:true})(ViewLogin);

0 个答案:

没有答案