react-native - 在反应本机导航中动态更改标题标题
问题描述
对于学校作业,我们正在使用 React Navigation 和 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 切换屏幕时永远不会更新,但我们不知道如何解决这个问题。
提前致谢!
解决方案
据我了解,您需要在堆栈中加载屏幕时更改标题。因此您可以使用以下内容:
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..
以避免在标题中添加空格。
推荐阅读
- python - 没有梯度为 Tensorflow Keras 提供自定义训练步骤
- node.js - 为什么 node.js 中的静态和动态导入以只读方式区别对待?
- traefik - argocd & traefik:argocd 无法访问
- php - 发送包含与收件人相关内容的 laravel 邮件
- sql - 最常用的日期查询
- javascript - 带有 CLICK 事件侦听器的 Javascript API FETCH:TypeError:尝试获取资源时出现 NetworkError
- datepicker - jQuery Datepicker - 如何设置:datepicker1 + 1 天变为 minDate datepicker2 并可选择关闭周六和周日
- python - 尽管为给定列提供“非空”条件,但我似乎可以在表中输入空值
- android - 找不到符号导入 io.flutter.FlutterInjector
- php - 在 postgresql 中存储在数据类型为 double 的列中时,减法结果不准确