在反应导航5中使用抽屉导航传递数据/参数

Question

我在属于不同导航器的两个屏幕组件之间传递参数时遇到问题。

首先，我有堆栈导航器内的登录组件，然后我有抽屉导航器内的主页组件。等级制度是这样的：

好的，我将在此处显示登录和主页中的完整代码：

（登录组件）

import React, {useState} from 'react';
import {StyleSheet, Text, View, SafeAreaView} from 'react-native';
import {Button, TouchableRipple} from 'react-native-paper';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';

import {Container, baseColor} from '../Styles';

const users = [
  {
    id: 72780,
    name: 'Sample 1',
    login: 'videouser1',
    password: 'videouser1',
    color: '#34ad86',
  },
  {
    id: 72781,
    name: 'Sample 2',
    login: 'videouser2',
    password: 'videouser2',
    color: baseColor,
  },
];
const Login = ({navigation}) => {
  const toHome = (user) => {
    navigation.navigate('Drawer', {screen: 'Home', params: {user}});
  };

  return (
    <View style={Container}>
      <Button
        mode="contained"
        uppercase={false}
        onPress={() => toHome(users[0])}
        style={styles.button}>
        Login as Sample 1
      </Button>
      <Button
        mode="contained"
        uppercase={false}
        onPress={() => toHome(users[1])}
        style={styles.button}>
        Login as Sample 2
      </Button>
    </View>
  );
};

export default Login;

const styles = StyleSheet.create({
  button: {
    margin: hp('2%'),
  },
});

登录组件位于 Stack Navigator 内：

（堆栈导航器）

import * as React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import SplashScreen from '../Screen/SplashScreen';
import Login from '../Screen/Login';
import DrawerNavigator from './DrawerNavigator';

const Stack = createStackNavigator();

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="SplashScreen"
        component={SplashScreen}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Login"
        component={Login}
        options={{headerShown: false, gestureEnabled: false}}
      />
      <Stack.Screen
        name="Drawer"
        component={DrawerNavigator}
        options={{headerShown: false, gestureEnabled: false}}
      />
    </Stack.Navigator>
  );
}

export default StackNavigator;

我在抽屉导航器中有主页组件：

import * as React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';

import Home from '../Screen/Home';
import Profile from '../Screen/Profile';
import Settings from '../Screen/Settings';
import CustomDrawerContent from './CustomDrawerContent';

const Drawer = createDrawerNavigator();

function DrawerNavigator({route, navigation}) {
  console.log('params', route.params);
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home" component={BottomTabs} />
      <Drawer.Screen name="Profile" component={Profile} />
      <Drawer.Screen name="Settings" component={Settings} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;

最后，这是我的主页组件：

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Home = ({route, navigation}) => {
  console.log('user', route);
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({});

我必须将参数从登录传递到主页组件，我该怎么做？我已经遵循了 React navigation 5 文档，但它运行得不好。

Answer 1

尝试这个：

import * as React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
    
import Home from '../Screen/Home';
import Profile from '../Screen/Profile';
import Settings from '../Screen/Settings';
import CustomDrawerContent from './CustomDrawerContent';

const Drawer = createDrawerNavigator();

function DrawerNavigator({route, navigation}) {
  console.log('params', route.params);
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home" initialParams={{ params: route.params }} component={BottomTabs} />
      <Drawer.Screen name="Profile" component={Profile} />
      <Drawer.Screen name="Settings" component={Settings} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;