React Native 嵌套堆栈导航显示空白屏幕。

Question

我试图使用Stack navigator实现嵌套的React Native导航，遵循网站上的示例。我也查看了SO中的其他问题，但找不到我的错误。

在Home.tsx组件中，我有两个嵌套路由HomeView和Products。在HomeView.tsx中的链接点击后，我将在Home.tsx中执行categoryClick，并且在此函数中，我想要导航到Products.tsx组件。导航按预期工作，但是在Products组件中定义的嵌套路由不像预期那样工作。它显示为空屏幕。请帮助理解我的错误。

Home.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;

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 (
    <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;

- brk

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;

- ZFLOC TECHNOLOGIES

---

有什么原因吗？ - brk

参考：https://dev59.com/37_pa4cB1Zd3GeqP-gNu#65701450 - ZFLOC TECHNOLOGIES