如何从navigation.navigate外部的组件中使用stack.navigation

Question

我有一个应用程序使用React本机，在这里我使用了react导航(5.2.9)。

我构建了一个Stack.Navigator，在这里我有我的屏幕，但我希望页脚组件在外面，以便它在所有屏幕呈现。问题是，我无法从页脚导航，这是我需要做的，因为页脚有几个应该更改屏幕的按钮：

const Stack = createStackNavigator();

const App = () => {    
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Header />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
            headerShown: false
          }}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{
            headerShown: false
          }}
          />
        </Stack.Navigator>
        <Footer />
      </NavigationContainer>
    </Provider>
  );
};

如何将导航支柱传递给页脚组件？

Answer 1

试试这个：

创建一个名为: RootNavigation.js的新文件

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// file where you have the navigation

import {navigationRef} from './path/to/RootNavigation';

      <NavigationContainer ref={navigationRef}>
      .....
        <Footer />
      </NavigationContainer>

Footer.js应该是这样的：

// Footer.js

import React from 'react';
import {View, Button} from 'react-native';
import * as RootNavigation from './path/to/RootNavigation';

const Footer= () => {
  return (
    <View>
      <Button
        title={'Go to'}
        onPress={() =>
          RootNavigation.navigate('screenName ', {userName: 'Lucy'})
        }
      />
    </View>
  );
};

export default Footer;

要获得更多信息，您可以阅读文档。https://reactnavigation.org/docs/navigating-without-navigation-prop/

Answer 2

Stack.Screen组件之外的组件不接收导航支柱。因此，在本例中，您必须在页脚组件中使用NavigationContainer，如下所示：

1. 用const myRef = React.createRef()创建一个ref
2. 将其传递给<NavigationContainer ref={myRef}>，并且
3. 用那个引用来导航，myRef.current?.navigate(name, params)。

这都是这里的解释。这里的文档将新文件中的ref创建分开，以允许您在没有依赖循环/问题的情况下导入ref。在docs状态下，您现在可以在任何js模块中调用RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });，而不仅仅是在react组件中。

但是，在您的情况下，您不需要单独的文件中的ref。

const Stack = createStackNavigator();
const navigationRef = React.createRef();

const App = () => {    
  return (
    <Provider store={store}>
      <NavigationContainer ref={navigationRef}>
        <Header />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
            headerShown: false
          }}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{
            headerShown: false
          }}
          />
        </Stack.Navigator>
        <Footer navigationRef={navigationRef}/>
      </NavigationContainer>
    </Provider>
  );
};

在<Footer/>中使用navigationRef.current?.navigate(name, params)

Answer 3

从文件上看。https://reactnavigation.org/docs/connecting-navigation-prop/

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton({ screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}