Реактивная навигация, вложенная навигация не работает

Question

Я создаю пример реагирования на нативное приложение. Здесь я использую реагирующую навигацию. Это мой код.

app.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";

const Stack = createStackNavigator();

import StackOne from "./appNavOne";

const MainStack = () => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="stackOne" component={StackOne} />
  </Stack.Navigator>
);

const App = () => (
  <NavigationContainer>
    <MainStack />
  </NavigationContainer>
);

export default App;

Экран appNavOne

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

import StackTwo from './appNavTwo';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Profile' onPress={() => navigation.navigate('Profile')} />
  </View>
);

const ProfileScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Settings' onPress={() => navigation.navigate(StackTwo)} />
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const StackOne = () => (
  <Stack.Navigator headerMode='none' initialRouteName='Home'>
    <Stack.Screen name='Home' component={HomeScreen} />
    <Stack.Screen name='Profile' component={ProfileScreen} />
  </Stack.Navigator>
);

export default StackOne;

appNavTwo screen

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

const Stack = createStackNavigator();

const SettingsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Settings' onPress={() => navigation.navigate('Settings')} />
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const NotificationsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const StackTwo = () => (
  <Stack.Navigator initialRouteName='Settings'>
    <Stack.Screen name='Settings' component={SettingsScreen} />
    <Stack.Screen name='Notifications' component={NotificationsScreen} />
  </Stack.Navigator>
);

export default StackTwo;

В этой строке на экране appNavOne выдается сообщение об ошибке: «NAVIGATE» с полезной нагрузкой undefined не обрабатывался никакими навигаторами.

<Button title='Go to Settings' onPress={() => navigation.navigate(StackTwo)} />

Что я тут не так делаю?

Answer 1

Вы не использовали StackTwo в любом навигаторе.

1-) добавьте StackTwo в MainStack:

const MainStack = () => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="stackOne" component={StackOne} />
    <Stack.Screen name="stackTwo" component={StackTwo} />
  </Stack.Navigator>
);

2-) Измените навигацию.

const ProfileScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button
      title="Go to Settings"
      onPress={() => navigation.navigate('stackTwo', { screen: 'Settings' })}
    />
    <Button title="Go back" onPress={() => navigation.goBack()} />
  </View>
);

Также, чтобы понять, произошла ли навигация, измените текст внутри компонента Настройки.

const SettingsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>HERE GOES SETTINGS!!!</Text>
    <Button
      title="Go to Settings"
      onPress={() => navigation.navigate('Settings')}
    />
    <Button title="Go back" onPress={() => navigation.goBack()} />
  </View>
);