我试图在导航中调用子功能。这样就可以在导航使用的视图中使用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);