React-Navigation:使用/更改带有 Redux 状态的标题标题 [英] React-Navigation: Use/Change header title with Redux state

问题描述

是否可以在 React Navigation 的标题标题中访问整个 Redux 状态?

Is it possible to access the whole Redux state inside the React Navigation's header title?

官方文档说导航对应的状态是可访问的:

The official docs says that the state corresponding to the navigation is accessible:

  static navigationOptions = {
    title: ({ state }) => `Chat with ${state.params.user}`
  };

但我希望访问 Redux 状态的其他部分，并在该状态更新时更新标题.今天可以吗?

But I wish to access other parts of my Redux state, with the title updating when that state updates. Is that possible today?

推荐答案

这可以通过一些解决方法来实现.我什至不会称其为解决方法，也不会称其为一项很棒的功能:-)

this is possible with a little workaround. I would not even call this a workaround either I would call this a great feature :-)

你只需要像这样在你的标题中使用一个新组件:

you just have to use a new component in your header like this:

static navigationOptions = {
    header: (navigation) => {
        return <HomeViewTitle />;
    }
}

然后你可以在我的例子中使用 redux state 连接 HomeViewTitle:

and then you can connect in my case HomeViewTitle with the redux state:

import React, { Component } from 'react';

import {
    View,
    Text
} from 'react-native';

import { connect } from 'react-redux';


class HomeViewTitle extends Component {

    render() {

        return (

            <View style={{height: 64, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center', paddingTop: 20}}>
                <Text style={{color: '#FFFFFF', fontSize: 17, fontWeight: 'bold'}}>Home</Text>
            </View>

        );

    }

}

const mapStateToProps = (state) => {
    return state;
}

export default connect(mapStateToProps)(HomeViewTitle);

然后你将你的 redux 状态作为 HomeViewTitle 中的道具，你可以设置标题动态

then you have your redux state as props in HomeViewTitle and you can set the header dynamic

这篇关于React-Navigation:使用/更改带有 Redux 状态的标题标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！