React Native [ Stacks - Navigation ] 给一个函数导航

Question

我遇到了一个问题，我想将导航传递给组件

我的设置是我有 2 个视图，它们都在使用 NavigationContainer

问题是我想制作自己的导航栏，我将其制作为位于其自己的 nav.js 文件中的自己的组件我无法弄清楚如何给组件导航。

我该如何解决这个问题？

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import LoginScreen from './views/login'

import HomeScreen from './views/home'
import ProfileScreen from './views/profile'

export default function App() {
  const Stack = createStackNavigator();
  
  return (
    <NavigationContainer linking={{
      config: {
        screens: {
          Login: "/",
          Home: "/home",
          Profile: "/Profile/:Username"
        }
      },
      }}>
      <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Home.js

import MobileNav from './nav/mobile'

const Home = ({navigation}) => {
      return (
        <View style={styles.Body} >
              // Home Contect here
            <MobileNav />
        </View>

      );
  }
  
export default Home;

Nav.js

const MobileNav = () => {
      return (
        <View style={styles.NavBody} >

            <View style={styles.FlexBody}>
              
              <View style={styles.FlexGroup} >
                <Pressable style={styles.ProfilePictureParent} onPress={() => this.navigation.navigate("Profile", {Username: 'IAmVolvic'}) }>
                  <Image 
                    source={{uri: 'https://avatars.dicebear.com/api/adventurer/IAmVolvic.svg'}} 
                    style={styles.ProfilePicture} 
                  />
                </Pressable>
              </View>

            </View>
            
        </View>
      );
  }
  
  export default MobileNav;

Answer 1

您应该可以在这里简单地使用 useNavigation 挂钩。例如：

import {useNavigation} from '@react-navigation/native';
const MobileNav = () => {

const Navigation = useNavigation();

      return (
        <View style={styles.NavBody} >

            <View style={styles.FlexBody}>
              
              <View style={styles.FlexGroup} >
                <Pressable style={styles.ProfilePictureParent} onPress={() => Navigation.navigate("Profile", {Username: 'IAmVolvic'}) }>
                  <Image 
                    source={{uri: 'https://avatars.dicebear.com/api/adventurer/IAmVolvic.svg'}} 
                    style={styles.ProfilePicture} 
                  />
                </Pressable>
              </View>

            </View>
            
        </View>
      );
  }
  
  export default MobileNav;