如何在导航标题中添加导航？答案

【问题标题】：How can I add navigation in the navigation header?如何在导航标题中添加导航？
【发布时间】：2021-01-18 21:56:09
【问题描述】：

我正在尝试创建一个用于导航到“CreateScreen”的按钮，该按钮位于标题中，因此我按照文档的建议将其写在 <NavigationContainer> 中，但似乎我无法访问导航， 我在 NavigationContainer 中实际上并不需要它，所以如果您有其他实现建议（例如，在组件内实现按钮），那就太好了。

这就是我想要完成的（app.js 的一部分）

headerRight: () => {
            return <TouchableOpacity>
              <Feather name="plus" size={30} onPress={() => navigation.navigate('Create')} />
            </TouchableOpacity>

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Index">
        <Stack.Screen
          name="Index"
          component={IndexScreen}
          options={{
            title: 'Home',
            headerRight: () => {
              return (
                <TouchableOpacity>
                  <Feather
                    name="plus"
                    size={30}
                    onPress={
                      () => navigation.navigate('Create')
                      //Thats what Im trying to accomplish
                    }
                  />
                </TouchableOpacity>
              );
            },
          }}
        />
        <Stack.Screen name="Show" component={ShowScreen} />
        <Stack.Screen name="Create" component={CreateScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您可以使用 useNavigation 挂钩来访问导航道具：

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();
navigation.goBack();

来源： https://reactnavigation.org/docs/use-navigation/

【讨论】：

它实际上对我不起作用，它给了我一个关于违反钩子规则的错误，但我的问题已经解决了，还是谢谢你。

【解决方案2】：

In 选项将返回导航

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Index">
        <Stack.Screen
          name="Index"
          component={IndexScreen}
          //navigation<<<<<<<<<<<<<<<<<<<<<<<<<here
          options={({navigation, route}) => ({
            title: 'Home',
            headerRight: () => {
              return (
                <TouchableOpacity>
                  <Feather
                    name="plus"
                    size={30}
                    onPress={() => navigation.navigate('Create')}
                  />
                </TouchableOpacity>
              );
            },
          })}
        />
        <Stack.Screen name="Show" component={ShowScreen} />
        <Stack.Screen name="Create" component={CreateScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

【讨论】：

是的，如果你要求投票，我试图投票给你，但我似乎没有足够的代表
接受这个问题，如果我的答案是正确的，你检查一下检查棒。它在按钮upvote和downvote下方。此链接是 StackOverflow 之旅stackoverflow.com/tour
@Ahn Devit 在您的代码中似乎“选项”接收了一个函数，您在=> 之后将其写为({navigation, route}) => ({ 为什么要在大括号之前打开一个括号？我想不通这个语法
({navigation, route}) => ({}) 等于 ({navigation, route}) => {return({})}