Странное поведение React Native вложенных вкладок и навигации по стеку: стек работает, только если я нажимаю на вкладки при первом открытии приложения

Я разрабатываю приложение в React Native со следующим макетом:

Панель вкладок нижнего колонтитула с 3 экранами: screen1, screen2, screen3. Кроме того, я вложил еще один экран в экран 1 и еще один в экран 2 с навигацией по стеку.

Когда нажата вкладка Screen2, открывается Screen2 с некоторыми данными по умолчанию. Однако вторая кнопка на Экране 1 открывает Экран 2 с введенными пользователем данными.

Функция на Экране 1, которая переходит на Экран 2:

function onPressHandler(){

  navigation.navigate('Screen2', {data: X});
}

Затем данные извлекаются на Screen2.js:

const information = !route.params? 'default' : route.params.data;

Теперь вот что происходит: когда приложение открывается, если я перехожу к экрану 2 с помощью навигации по вкладкам (нажав нижний колонтитул), то, когда я нахожусь на экране 1, я также могу получить доступ к экрану 2 с помощью кнопки (с данными, введенными пользователем) столько раз, сколько Мне нравится. Я могу переключать экраны столько раз, сколько захочу, и это работает постоянно.

Однако, если я этого не сделаю и просто перейду на экран 2 с помощью кнопки «Экран 1», никогда не нажимая вкладку «Экран 2» в нижнем колонтитуле, я получаю следующую ошибку:

Действие NAVIGATE с полезной нагрузкой {"name":"Screen2","params":{"data: xxx"}} не было обработано ни одним навигатором.

Вот визуальное представление макета приложения (надеюсь, это поможет):

Экран 1 | Экран 2 (данные: по умолчанию) | Экран 3 При нажатии:nestedScreen1 при нажатии:nestedScreen2 При нажатии: Экран 2 (данные: введено пользователем)

Вот код:

import Screen1 from './Screen1.js';
import Screen2 from './Screem2.js'       
import Screen3 from './screen3.js';

import NestedScreen1 from './NestedScreen1.js';
import NestedScreen2 from './NedstedScreen2.js';   


import { NavigationContainer } from '@react-navigation/native';            
import {createNativeStackNavigator} from '@react-navigation/native-stack';  
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


export default function App() {

 const Tab = createBottomTabNavigator();

 const Stack = createNativeStackNavigator();

 const StackNavigationForScreen1= () => {

    return(
      <Stack.Navigator>
          <Stack.Screen name = "Screen1" component = {Screen1} />
          <Stack.Screen name = "NestedScreen1" component = {NestedScreen1} />
     
      </Stack.Navigator>
   );}


const StackNavigationForScreen2 = () => {

   return(
     <Stack.Navigator  >
         <Stack.Screen name='Screen2' component = {Screen2} />
         <Stack.Screen name='NestedScreen2' component = {NestedScreen2} />

     </Stack.Navigator> 
  );}

return (

   <NavigationContainer>

     <Tab.Navigator>

        <Tab.Screen name='Screen1Tab' component = {StackNavigationForScreen1}/>
        <Tab.Screen name='Screen2Tab' component = {StackNavigationForScreen2}/> 
        <Tab.Screen name='Screen3' component = {Screen3}/>

     </Tab.Navigator>
   </NavigationContainer>
  );}

Есть идеи, что я мог сделать неправильно или как открыть Screen2 с Screen1, не нажимая сначала вкладку Screen2 хотя бы один раз?

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
240
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

для навигации между вложенными стеками вы должны использовать что-то вроде этого: -

navigation.navigate('nested_stack_screen', {
                screen: 'screen1',
                params: {
                    name:'anything'
                },
            })

Спасибо! Это именно то, что устранило проблему.

user17243605 23.11.2022 14:43

Другие вопросы по теме