在最新版本的react navigation v5.0上，使用标题按钮更改屏幕

Question

我在这里似乎找不到任何关于用标题按钮更改屏幕的最新信息。因此，我想知道现在更改屏幕的标题按钮的正确语法是什么。我已经在我的导航堆栈代码文件中定义了我的头，在那里我制作了头，但我似乎不知道如何获得导航道具并能够在头上调用它。有些答案说使用导航选项或使其静态，但从文档中(从未解释如何做到这一点(没有关于导航选项的正确版本，所以我认为它们被删除了。此外，当我尝试代码时，什么都不起作用。谢谢你的帮助，希望我能得到答案或找出正确的语法。

这是我的代码的当前版本。它说当我按下按钮时导航不是一个功能：

import React from 'react';
import {Button} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import Home from '../Views/Home';
import AddTask from '../Views/AddTask';
const Stack = createStackNavigator();
const HomeStack = ({navigate}) => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{
headerStyle: {backgroundColor: 'darkslateblue'},
headerRight: () => (
<Button
onPress={() => navigate('Add Task')}
title="Add Task"
color="#000000"
/>
),
}}
/>
<Stack.Screen
name="Add Task"
component={AddTask}
options={{
headerStyle: {backgroundColor: 'darkslateblue'},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default HomeStack;

Answer 1

我还没有在App.js中找到实现这一点的方法，但发现您可以在通过useNavigation访问导航器的组件或屏幕中轻松实现。

例如，我的App.js没有定义标题按钮：

import 'react-native-gesture-handler';
import * as React from 'react';
import { Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import IndexScreen from './src/screens/IndexScreen';
import ShowScreen from './src/screens/ShowScreen';
import CreateScreen from './src/screens/CreateScreen';
import { Provider } from './src/context/BlogContext';
const Stack = createStackNavigator();
const App = () => {
return (
<Provider>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Index"
component={IndexScreen}
options={{ 
title: 'Blogs',
}}
/>
<Stack.Screen 
name="Show" 
component={ShowScreen} 
options={{ title: 'Show Screen' }}
/>
<Stack.Screen 
name="Create" 
component={CreateScreen} 
options={{ title: 'New Post' }}
/>
</Stack.Navigator>
</NavigationContainer>
</Provider>
);
}
export default App;

这里有一个屏幕示例，我在其中添加了一个导航到另一个屏幕的头右按钮：

import React, { useContext } from 'react';
import { useNavigation } from '@react-navigation/native';
import {View, Text, StyleSheet, FlatList, Button, TouchableOpacity} from 'react-native';
import { Context } from '../context/BlogContext';
import { Feather } from '@expo/vector-icons';
const IndexScreen = () => {
const {state, addBlogPost, deleteBlogPost} = useContext(Context);
const navigation = useNavigation();
navigation.setOptions({
headerRight: () => (
<Button title="Add Post" onPress={() => navigation.navigate('Create')} />
),
});
return (
<View style={styles.containerStyle}>
<Text style={styles.titleStyle}>Index Screen</Text>
<FlatList
horizontal={false}
data={state}
keyExtractor={(item) => item.title}
renderItem={({item}) => {
return (
<TouchableOpacity onPress={navigation.navigate('Show', { id: item.id })}>
<View style={styles.blogPostStyle}>
<Text style={styles.blogPostTitleStyle}>{item.title}</Text>
<TouchableOpacity onPress={() => {
deleteBlogPost(item.id);
}}>
<Feather 
name="trash" 
style={styles.deleteIconStyle} 
/>
</TouchableOpacity>
</View>
</TouchableOpacity>
);
}}
/>
</View>
);
};
const styles = StyleSheet.create({
containerStyle: {
margin: 10
},
titleStyle: {
},
blogPostStyle: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingVertical: 20,
borderTopWidth: 1,
color: 'gray'
},
blogPostTitleStyle: {
fontSize: 18
},
deleteIconStyle: {
fontSize: 24
}
});
export default IndexScreen;