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

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

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

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, но мы не знаем, как это исправить.

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


react-native react-redux react-navigation react-navigation-drawer react-navigation-stack
person Paggito    schedule 19.03.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Насколько я понимаю, вам нужно изменить заголовок, когда экран загружается в стек, поэтому вы можете использовать что-то вроде:

class ScreenInContactStack extends React.Component{
    //Constryctor
    static navigationOptions = ({navigation}) => ({
        title: (navigation.state.params || {}).title || 'Chat! ',
    });
    //Remaining Logic
}

и во время звонка

this.props.navigation.navigate('ScreenInContactStack', {title: yourTitle + ' ',});

Не знаю почему, но панель приложений сжимает заголовок до "лайк" yourTi.., чтобы избежать этого, добавляйте пробел к заголовку.

person Prasad Dighe    schedule 21.03.2020

arrow_upward
-1
arrow_downward

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

заголовок карты как опора для принудительного повторного рендеринга 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);
person Hend El-Sahli    schedule 19.03.2019
comment
Где connect метод? - person shimatai; 02.09.2019