[英]React native nested stack navigation showing empty screen
我正在尝试按照网站上的这个示例使用 Stack navigator 实现嵌套反应原生导航。 我还检查了 SO 中的其他问题,但找不到我的错误。
在Home.tsx
组件中,我有两个嵌套路由 HomeView 和 Products。 单击HomeView.tsx
中的链接时,我正在Home.tsx
和此 function 中执行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;
我们不能把 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.