在Reaction本机导航中动态更改标题标题 [英] Dynamically change header title in react native navigation
本文介绍了在Reaction本机导航中动态更改标题标题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
对于一项学校作业,我们在REACT原生中创建了一个应用程序,带有REACT导航和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中放置标题栏时确实让它工作了,但是由于我们希望抽屉从标题的形式出现,所以这不是一个选项。我的猜测是,堆栈使用某个标题创建一次,并且在使用DrawerNavigator切换屏幕时永远不会更新,但我们不知道如何解决这个问题。
提前感谢!
推荐答案
据我所知,当屏幕被堆叠加载时,您需要更改标题。因此,您可以使用如下命令:
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将标题压缩为LikeyourTi..
以避免出现这种情况,请在标题中添加空格。
这篇关于在Reaction本机导航中动态更改标题标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文