反應原生嵌套堆疊導航顯示空螢屏

我正在嘗試按照網站上的這個示例使用 Stack navigator 實作嵌套反應原生導航。我還檢查了 SO 中的其他問題，但找不到我的錯誤。

在Home.tsx組件中，我有兩個嵌套路由 HomeView 和 Products。在一個鏈接的點擊HomeView.tsx，我執行categoryClick的Home.tsx這個函式中，我希望導航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;

uj5u.com熱心網友回復：

我們不能把 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;

標籤：

上一篇：為什么map()函式在我的反應應用程式中不起作用？

下一篇：ReactTypescript，如何使用背景關系？