在堆栈导航中导航到未渲染的屏幕

Question

我的应用程序具有以下结构（忽略以下结构中的语法，仅使用它来呈现导航的整体组织）并且我的导航使用 React Navigation 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 中显示图书列表，单击每本书都会进入图书详细信息屏幕。在该屏幕上，它显示了有关该书的更多详细信息和该书作者的图像。单击作者图像应该会转到作者详细信息屏幕，但这不起作用，因为未呈现第二个堆栈导航器并且导航不知道它。

查看了包含嵌套导航器的反应导航文档并到处搜索但没有找到解决方案。

是否有让它工作的技巧，或者我是否需要将我的导航树重组为不同的导航树？

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'
    }
})

在堆栈导航中导航到未渲染的屏幕

Navigate to un-rendered screen inside stack navigation

react-native-android

react-navigation

react-navigation-stack

react-navigation-v5