反应显示空屏幕的本机嵌套堆栈导航 [英] React native nested stack navigation showing empty screen

问题描述

我正在尝试使用堆栈导航器实现来自网站的example嵌套的Reaction本机导航。我还签入了其他问题SO，但找不到我的错误。

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

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;

推荐答案

我们无法将导航器放入视图中，因此您需要将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;

这篇关于反应显示空屏幕的本机嵌套堆栈导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！