Question

我正在尝试创建一个用于导航至“ 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>
  );
}

Answer 1

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

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

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

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

Answer 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>
  );
}

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

2 个答案: