javascript - react native 嵌套堆栈导航显示空屏幕

Question

我正在尝试使用 Stack navigator 实现嵌套的 React native 导航，遵循此 example从网站。我还检查了 SO 中的其他问题，但找不到我的错误。

在 Home.tsx 组件中，我有两个嵌套路由 HomeView 和 Products。单击 HomeView.tsx 中的链接，我在 Home.tsx 中执行 categoryClick 并在此函数内，我想导航到 Products.tsx 组件。导航按预期工作，但在 screen 中为 Products 组件定义的嵌套路由未按预期工作。它显示一个空屏幕。请帮助理解我的错误

首页.tsx

import React, {useState} from "react";
import {View} from "react-native";
import Header from "../header/Header";
import HomeStyles from './Home.scss';

import {createNativeStackNavigator} from "@react-navigation/native-stack";
import Products from "../products/Products";
import HomeView from "../home-view/HomeView";

export interface HomeProps {}

export function Home({route, navigation}) {
  let [loader, setLoader] = useState(false)
  const Stack = createNativeStackNavigator()

  function categoryClick(e: number) {
    // expectation is it will navigate to `Ab` screen on loading `Products`
    navigation.navigate('Products', {
      screen: 'Ab',
      params: {}
    })
  }

  return (
    <View style={
      HomeStyles.homeContainer}>
      <View style={HomeStyles.homeHeader}>
        <Header/>
      </View>

      <Stack.Navigator initialRouteName='Products'>
        <Stack.Screen name='HomeView'
                      options={{headerShown: false}}>
          {(props) => <HomeView
            catrgotryClick={categoryClick}
            {...props} />}
        </Stack.Screen>
        <Stack.Screen
          name='Products'
          component={Products}
          options={{headerShown: false}}/>
      </Stack.Navigator>


    </View>
  );
}

export default Home;

产品.tsx

import { Route, Link } from 'react-router-dom';
import ProductsStyles from  './Products.scss';
import {Text, View} from "react-native";
import React, {useEffect, useState} from "react";
import {RouteProp, useNavigation} from "@react-navigation/native";
import Ab from "../ab/Ab";
import Hi from "../hi/Hi";
import Ac from "../ac/Ac";
import Je from "../je/Je";
import {createNativeStackNavigator} from "@react-navigation/native-stack";


export interface ProductsProps {
  route:RouteProp<any>;
  navigation:any
}


export function Products(props:ProductsProps) {
  const ProductStack = createNativeStackNavigator();
  return (
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
     <ProductStack.Navigator>
       <ProductStack.Screen name='Ab' options={{headerShown:false}}
        component={Ab}/>
        <ProductStack.Screen name='Hi' component={Hi}/>
        <ProductStack.Screen name='Ac' component={Ac}/>
        <ProductStack.Screen name='Je' component={Je}/>
      </ProductStack.Navigator>
      </View>
 );
}

export default Products;

Answer 1

我们不能把Navigator放在View里面，所以需要把Products.tsx文件改成

import { Route, Link } from 'react-router-dom';
import ProductsStyles from  './Products.scss';
import {Text, View} from "react-native";
import React, {useEffect, useState} from "react";
import {RouteProp, useNavigation} from "@react-navigation/native";
import Ab from "../ab/Ab";
import Hi from "../hi/Hi";
import Ac from "../ac/Ac";
import Je from "../je/Je";
import {createNativeStackNavigator} from "@react-navigation/native-stack";


export interface ProductsProps {
  route:RouteProp<any>;
  navigation:any
}


export function Products(props:ProductsProps) {
  const ProductStack = createNativeStackNavigator();
  return (
     <ProductStack.Navigator>
       <ProductStack.Screen name='Ab' options={{headerShown:false}}
        component={Ab}/>
        <ProductStack.Screen name='Hi' component={Hi}/>
        <ProductStack.Screen name='Ac' component={Ac}/>
        <ProductStack.Screen name='Je' component={Je}/>
      </ProductStack.Navigator>
 );
}

export default Products;