导航到堆栈导航内的未渲染屏幕答案

【问题标题】：Navigate to un-rendered screen inside stack navigation导航到堆栈导航内的未渲染屏幕
【发布时间】：2020-04-23 09:03:44
【问题描述】：

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

浏览了包括嵌套导航器在内的 react 导航文档，到处搜索，但没有找到解决方案。

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

【问题讨论】：

标签： react-native-android react-navigation react-navigation-stack react-navigation-v5

【解决方案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'
    }
})

【讨论】：