React-Navigation: использование/изменение заголовка заголовка с состоянием Redux

Можно ли получить доступ ко всему состоянию Redux внутри заголовка заголовка React Navigation?

Официальные документы говорят, что доступно состояние, соответствующее навигации:

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

Но я хочу получить доступ к другим частям моего состояния Redux с обновлением заголовка при обновлении этого состояния. Возможно ли это сегодня?

Ответы

Ответ 1

это возможно с небольшим обходным решением. Я бы даже не назвал это обходным путем, я бы назвал это замечательной особенностью: -)

вам просто нужно использовать новый компонент в своем заголовке следующим образом:

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

а затем вы можете подключиться в моем случае HomeViewTitle с состоянием редукции:

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);

тогда у вас есть состояние редукции в качестве реквизита в HomeViewTitle, и вы можете установить динамический заголовок