Перейдите к неотрисованному экрану внутри стека навигации

Question

У меня есть следующая структура для моего приложения (игнорируйте синтаксис в приведенной ниже структуре, используя ее только для представления общей организации навигации), и я использую реагирование навигации v5 для своей навигации.

<TabNavigator>
  <Tab1 label="Books">
    <StackNavigator>
      <Screen1 name=books>
      <Screen2 name=bookDetails>
    </StackNavigator>
  </Tab1>
  <Tab2 label="Authors">
    <StackNavigator>
      <Screen1 name=authors>
      <Screen2 name=authorDetails>
    </StackNavigator>
  </Tab2>
</TabNavigator>

Когда приложение загружается, оно отображает список книг в FlatList, щелкая по каждой из которых вы переходите на экран bookDetails. На этом экране отображается более подробная информация о книге и образ автора книги. Нажав на изображение автора, вы попадете на экран authorDetails, но это не работает, поскольку навигатор второго стека не отображается и навигация об этом не знает. везде, но не нашли решения.

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

Answer 1

Вы можете перемещаться без проблем.

У вас есть полный пример здесь:

import React from 'react'
import { View, Text, Button, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'

const Tab = createBottomTabNavigator()
const Stack = createStackNavigator()

const Books = ({ navigation }) => (
    <View style={styles.view}>
        <Button
            title="Go to details"
            onPress={() => navigation.navigate('BookDetails')}
        />
    </View>
)
const BookDetails = ({ navigation, id }) => (
    <View style={styles.view}>
        <Button
            title="Author name"
            onPress={() => navigation.navigate('AuthorsStack',{screen:'AuthorDetails',params:{id: "Author id"}})}
        />
    </View>
)

const Authors = () => <View style={styles.view} />
const AuthorDetails = ({ navigation, route }) => (
    <View style={styles.view}>
        <Text>{route.params.id}</Text>
        <Text>Other details</Text>
        <Button
            title="Go to book details"
            onPress={() => navigation.navigate('BooksStack',{screen:'BookDetails',params:{id: "Book id"}})}
        />
    </View>
)

const BooksStack = () => (
    <Stack.Navigator>
        <Stack.Screen name="Books" component={Books} />
        <Stack.Screen name="BookDetails" component={BookDetails} />
    </Stack.Navigator>
)

const AuthorsStack = () => (
    <Stack.Navigator>
        <Stack.Screen name="Authors" component={Authors} />
        <Stack.Screen name="AuthorDetails" component={AuthorDetails} />
    </Stack.Navigator>
)

const TabNavigator = () => (
    <Tab.Navigator>
        <Tab.Screen name="BooksStack" component={BooksStack} />
        <Tab.Screen name="AuthorsStack" component={AuthorsStack} />
    </Tab.Navigator>
)


export default props => (
    <NavigationContainer>
        <TabNavigator />
    </NavigationContainer>
)

const styles = StyleSheet.create({
    view: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})