最新版 react-navigation v5.0 上带有标题按钮的换屏

Posted 2023-02-22

【中文标题】最新版 react-navigation v5.0 上带有标题按钮的换屏

【英文标题】：Change screen with a header button on the latest version of react-navigation v5.0

【发布时间】：2020-07-13 22:52:43

【问题描述】：

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

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

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;

【问题讨论】：

***.com/questions/60277929/…

【参考方案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;