Передача данных / параметров с использованием навигации по ящику в react navigation 5

ProgramBox

Передача данных / параметров с использованием навигации по ящику в react navigation 5

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#reactjs #react-native #react-navigation

#reactjs #react-native #react-навигация

Вопрос:

У меня проблема с передачей параметра между 2 экранными компонентами, которые принадлежат другому навигатору.

Сначала у меня есть компонент входа, который находится внутри Stack navigator, затем у меня есть домашний компонент, который находится внутри Drawer navigator. Иерархия выглядит следующим образом:

Хорошо, я покажу полный мой код в Login и Home здесь:

(Компонент входа)

 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({});

Я должен передать параметр из Login в Home component, как я могу это сделать? я уже слежу за документацией react navigation 5, но она работает плохо.

1. можете ли вы перенести свой код на stackblitz или любые другие платформы? сложно найти решения только с этими строками кода.

2. использование не удается прочитать параметр при переходе на другой экран, верно?

3. @KhanhLeTran я уже редактирую вопросы, добавляю свой полный код. Да, мне нужно прочитать данные из login в Home. В моем случае я получил параметры в навигаторе по ящику без проблем. но я не могу прочитать это в домашнем компоненте.

4. @KhanhLeTran если вы видите, я поместил журнал консоли в навигатор ящика и домашний компонент, в результате мой журнал в навигаторе ящика возвращает допустимые параметры (без проблем), но в моем домашнем компоненте я получил неопределенные параметры

Ответ №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;