StackNavigator in react-navigati

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",
            }
        });
    }

欢迎加入QQ群： 722600238

在这里可以讨论、帮助你解决你遇到的问题