在反应本机导航中动态更改标题标题答案

【问题标题】：Dynamically change header title in react native navigation在反应本机导航中动态更改标题标题
【发布时间】：2019-08-10 09:20:36
【问题描述】：

对于学校作业，我们正在使用 react 导航和 redux 创建一个 react native 应用。因为我们都是新手，所以我们有一个无法解决的问题。

我们希望在单击某个按钮时更改标题的标题。我们第一次单击按钮时，它会很好地更改标题标题。当我们按下不同的按钮时，问题就出现了，标题不会改变。请注意，无论我们选择什么选项，我们总是会转到同一个屏幕。

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-stack react-navigation-drawer

【解决方案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);

【讨论】：

connect 方法在哪里？

【解决方案2】：

据我了解，当屏幕加载到堆栈中时，您需要更改标题。所以您可以使用类似：

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

在打电话时

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

不知道为什么，但是 Appbar 将标题压缩为喜欢yourTi.. 以避免在标题中添加空格。

【讨论】：