StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等
StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等
onety码生
发布于 2018-11-21 11:08:43
发布于 2018-11-21 11:08:43
StackNavigator in react-navigation 如何动态修改导航标题 headerLeft headerRight headerTitle 等
在 StackNavigator 控制下的所有界面均可以通过 this.props.navigation 获取到当前导航对象
当前导航对象下有我们常用的几个方法
例如：
const { navigate, state, setParams } = this.props.navigation;本文章主要说明一下如何更改导航中的 headerLeft headerRight headerTitle 等
1. 首先稍微回忆一下如何设置当前界面的导航配置 (headerLeft headerRight headerTitle等)
static navigationOptions = ({navigation}) => {
return {
headerTitle: '个人信息',
headerLeft: null,
headerRight: null,
gesturesEnabled: false,
}};2. 更改导航配置
通过上面代码可以看到 setParams
它是一个 func
回想一下 this.props.navigation.state.params，与 setParams 是存在相似之处的。
对的，它与 setParams 刚好是对应起来的
当我们调用 this.props.navigation.setParams({}) 时，
static navigationOptions = ({navigation}) => {
return {
headerTitle: '个人信息',
headerLeft: null,
headerRight: null,
gesturesEnabled: false,
}};此代码会重新运行，会重新配置当前导航
3. 代码示例
static navigationOptions = ({navigation}) => {
if (navigation.state.params.navigation) {
return navigation.state.params.navigation
}
return {
headerTitle: '个人信息',
}};
updateNavigation() {
this.props.navigation.setParams({
navigation: {
headerTitle: "动态title",
}
});
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.12.27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录