对于学校作业,我们正在创建一个应用本地反应导航和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切换屏幕时永远不会更新,但我们不知道如何解决这个问题。
提前致谢!
试试这个:
将标题映射为prop,以强制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);