在最新版本的 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;

这是我添加一个导航到另一个屏幕的 headerRight 按钮的屏幕示例：

 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;