【发布时间】:2021-01-24 06:00:40
【问题描述】:
好的,所以我有我的 App.js
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Main" component={MainScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Pokus" component={PokusScreen} />
</Stack.Navigator>
</NavigationContainer>;
然后在我的 Home 组件中,我重定向到 Main 组件。
我这样传递导航:
export default function Home({ navigation })
我的问题是:我现在可以读取堆栈了吗?
我可以这样说:navigation.ReadStack()吗?
我想看什么?:我想看{ { name: "Home", index: 0 }, { name: "Main", index: 1 } }之类的东西
这可能吗?
感谢您的帮助!
编辑:我在主组件中的代码
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { last_activity_token, UpdateActivity } from '../Models/activityModel';
import {useNavigationState} from '@react-navigation/native';
export default function Main({ navigation }) {
//constanty -- constants
const [activity, setActivity] = useState(new last_activity_token());
const Pokus = () => {
const state = useNavigationState(state => state);
alert(JSON.stringify(state.routes))
}
//Load event
React.useEffect(() => {
activity.page.name = "Main";
UpdateActivity(activity);
});
//vzhled stránky -- design of page
return (
<View style={styles.layout}>
<Text>Main</Text>
<View style={styles.MainContent}>
<Text>Tady se to vše bude odehrávat</Text>
<Button onPress={Pokus}/>
</View>
</View>
);
}
//css
const styles = StyleSheet.create({
layout: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
MainContent: {
marginTop: 20
}
});
【问题讨论】:
-
你想通过阅读 Stack 来达到什么目的? React 导航中有不同的方法用于不同的目的。
-
如果要读取所有屏幕,则将所有屏幕名称和组件存储在一个数组中,并在 Stack.Navigator 中使用地图渲染屏幕
-
我想要实现的是:阅读堆栈。我正在尝试做:读取堆栈->将其存储在令牌中->然后从令牌加载堆栈。我知道如何存储令牌,也知道如何从令牌加载堆栈。我不知道的是如何读取堆栈
标签: reactjs react-native react-navigation react-navigation-stack react-navigation-v5