【问题标题】:@react-navigation/native and @react-navigation/stack read whole stack@react-navigation/native 和 @react-navigation/stack 读取整个堆栈
【发布时间】: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


【解决方案1】:

您可以使用下面的 useNavigationState 钩子获取当前状态

https://reactnavigation.org/docs/use-navigation-state/

import {useNavigationState} from '@react-navigation/native';

const state = useNavigationState((state) => state);

alert(JSON.stringify(state.routes));

这将给出路线中屏幕的输出

【讨论】:

  • 错误:无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一: 1. 你可能有不匹配的 React 版本和渲染器(例如 React DOM) 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用 有关如何调试和解决此问题的提示,请参阅 URL。
  • 好的,您正在使用类组件?检查这种作为道具传递的方式reactnavigation.org/docs/use-navigation-state/…
  • put const state = useNavigationState(state => state);在 Pokus 功能之外它应该可以工作
猜你喜欢
  • 1970-01-01
  • 2022-10-25
  • 2021-11-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-08-22
  • 2017-10-24
  • 1970-01-01
相关资源
最近更新 更多