react native - Setting NavigationBar's title asynchronously -
i trying set navigationbar
navigator
. when display static title, ok. however, when try set title asynchronously (for example when go user's profile route, user's display name api , set this.props.navigation.title
when api call promise resolves) title gets jumpy.
what proper approach issue?
here component (which connected redux store) handles navigationbar
:
import react 'react-native'; let { component, navigator, view } = react; import {connect} 'react-redux'; let navigationbarroutemapper = { title: (route, navigator, index, navstate) => { return ( <text style={{margintop: 15, fontsize: 18, color: colors.white}}>{this.props.navigation.title}</text> ); } }; class app extends component { render() { return ( <view style={{flex: 1}}> <navigator ref={'navigator'} configurescene={...} navigationbar={ <navigator.navigationbar routemapper={ navigationbarroutemapper } /> } renderscene={(route, navigator) => {...}} /> </view> ); } } export default connect(state => state)(app);
since routemapper
stateless object , route
seems way (best practice) keep state of navigationbar
.
route
can set this.props.navigator.replace(newroute);
in child components. however, re-renderscene
, cause dead loop of rerendering child components. want change navigationbar without side effects.
luckily, there's way keep context of current route. this:
var route = this.props.navigator.navigationcontext.currentroute; route.headeritems = {title: "message"}; this.props.navigator.replace(route);
refs:
Comments
Post a Comment