Динамически изменять заголовок заголовка в реагировать родной навигации

Question

Для школьного задания мы создаем приложение на реагирующем языке с быстрой навигацией и редукцией. Поскольку все мы новички, чтобы реагировать, у нас есть проблема, которую мы не можем решить.

Мы хотим изменить заголовок заголовка при нажатии определенной кнопки. При первом нажатии на кнопку, заголовок заголовка меняется очень хорошо. Проблема возникает, когда мы нажимаем другую кнопку, заголовок не меняется. Обратите внимание, что независимо от того, какой вариант мы выберем, мы всегда идем на один и тот же экран.

import React from 'react';
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation';
import {connect} from 'react-redux';
import { store } from '@redux/MyStore';
import { Ionicons } from '@expo/vector-icons';

import ScannerScreen from '@screens/ContactScreen';
import EventsScreen from '@screens/ListScreen';

const ContactStack = createStackNavigator({
    Contact: {
        screen: ContactScreen,
        navigationOptions: ({navigation}) => ({
            headerStyle: {backgroundColor: '#fa8231'},
            headerTitleStyle: {fontSize: 18},
            title: store.getState().setupState.title,
            headerLeft: <Ionicons 
            name="md-menu" style={{marginLeft:10}} 
            size={28} 
            onPress={() => navigation.toggleDrawer()} /> //menu button
        })
    }
});

// Code to create stack for the ListStack

const DrawerStack = createDrawerNavigator({
    Contact: ContactStack,
    List: ListStack
});

 const PrimaryNavigation = createStackNavigator({
    ListStack: {
        screen: ListStack,
        navigationOptions: {
            header: null,
        }, 
    },
    DrawerStack: {
        screen: DrawerStack,
        navigationOptions: {
            header: null,
        }, 
    },  
},
{
    initialRouteName: 'ListStack',
});

const AppContainer = createAppContainer(PrimaryNavigation);

class AppNavigation extends React.Component {
  render() {
    return <AppContainer/>
  }
}

export default (AppNavigation)

Мы заработали, когда поместили строку заголовка в DrawerNavigator, но, поскольку мы хотим, чтобы Drawer находился в заголовке, это не вариант. Я предполагаю, что стек создается один раз с определенным заголовком и никогда не обновляется при переключении экранов с помощью DrawerNavigator, но мы понятия не имеем, как это исправить.

Заранее спасибо!

Answer 1

Попробуйте это:

название карты в качестве опоры, чтобы заставить ContactStack перерисовывать каждый раз, когда он изменяется

class ContactStack extends React.Component {
  render() {
    const { title } = this.props.setupState;

    const Stack = createStackNavigator({
      Contact: {
          screen: ContactScreen,
          navigationOptions: ({navigation}) => ({
              headerStyle: {backgroundColor: '#fa8231'},
              headerTitleStyle: {fontSize: 18},
              title,
              headerLeft: <Ionicons 
              name="md-menu" style={{marginLeft:10}} 
              size={28} 
              onPress={() => navigation.toggleDrawer()} /> //menu button
          })
      }
    });

    return <Stack />;
  }
}

const mapStateToProps = ({ setupState }) => ({setupState});

export default connect(mapStateToProps)(ContactStack);