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

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

1 个答案: