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

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中显示了一个书籍列表，点击每个书籍就会进入bookDetails屏幕。在这个屏幕上，它显示了更多关于这本书的细节和这本书作者的图像。点击作者图片应该会进入authorDetails屏幕，但这是行不通的，因为第二个堆栈导航器没有被渲染，导航也不知道它的存在。

看了react导航文档，包括嵌套导航器，到处找，但没有找到解决办法。

有没有什么技巧可以让它工作，或者我需要重组我的导航树到另一个？

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