无法在React导航Stack.Navigator中调用元素属性
在React导航Stack.Navigator中，无法直接调用元素属性。Stack.Navigator是React Navigation库中的一个组件，用于实现堆栈导航。它负责管理堆栈导航中的路由和页面之间的切换。
在Stack.Navigator中，可以通过配置选项来定义每个页面的属性。常见的配置选项包括页面的名称、组件、参数等。但是，无法直接在Stack.Navigator中调用元素属性。
要在React导航Stack.Navigator中调用元素属性，可以通过以下步骤实现：
- 在Stack.Navigator中定义页面组件：
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}- 在页面组件中使用属性：
import React from 'react';
import { View, Text } from 'react-native';
function HomeScreen({ route }) {
const { name } = route.params;
return (
<View>
<Text>Welcome, {name}!</Text>
</View>
);
}
export default HomeScreen;在上述代码中，HomeScreen组件接收一个名为route的属性。通过解构赋值，我们可以获取route.params中的name属性，并在页面中使用它。
这样，当导航到HomeScreen页面时，可以通过传递参数来设置name属性：
navigation.navigate('Home', { name: 'John' });这样，页面中的文本将显示为"Welcome, John!"。
总结： 在React导航Stack.Navigator中，无法直接调用元素属性。但可以通过在页面组件中接收属性，并在页面中使用它们来实现类似的效果。
相关·内容
我试图在两个屏幕之间导航以响应本地，当我加载我的世博屏幕时，它会显示为空白。还有一个错误，即在‘@react导航/本机-堆栈’中找不到“export‘createStackNavigator’”。这是非常奇怪的，因为我正在看一个教程，它说我需要做的就是声明常量的反应本机。
我的app.js代码是：
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } fro
浏览 3提问于2022-07-12得票数 0
我正在使用新的原生react做导航，我想要的就是当按钮被按下时导航到下一个屏幕，我遵循了新的文档，但问题是我正在使用不同的类，在文档中，工作是使用App.js中的函数完成的，我试图相应地修改我的代码，但不能使用类:这是我的类：
import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import { NavigationContainer } from &
浏览 10提问于2020-03-13得票数 0
我有一个应用程序使用React本机，在这里我使用了react导航(5.2.9)。
我构建了一个Stack.Navigator，在这里我有我的屏幕，但我希望页脚组件在外面，以便它在所有屏幕呈现。问题是，我无法从页脚导航，这是我需要做的，因为页脚有几个应该更改屏幕的按钮：
const Stack = createStackNavigator();
const App = () => {
return (
<Provider store={store}>
<NavigationContainer>
<Header
浏览 3提问于2020-04-12得票数 21
回答已采纳
我正在构建一个react原生应用程序，但我在使用react导航/原生将道具传递到另一个屏幕时遇到了问题。 导航设置 export type RootStackParamList = {
Home: HomeProps,
LoginDemo: undefined,
Login: undefined
};
const Stack = createStackNavigator<RootStackParamList>();
const store = configureStore();
export const Navigation: React.FC = () =>
浏览 12提问于2020-10-13得票数 0
1回答
您好，我正在尝试从名为“商品”的产品页面中导航到购物车，但我似乎无法使用标题导航。我试过使用选项和屏幕选项，但两者都不起作用，我想我把导航放错了地方？我已经将购物车导航加载到了merch nav中，但是我似乎无法从购物车图标组件导航到它 MerchNav import React from 'react';
import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions } from 'react-native';
import { useDimensions } from '@reac
浏览 10提问于2021-04-10得票数 0
1回答
我试图在用户点击他们收到的通知时实现导航。我正在使用expo-notifications成功接收通知，并接受来自API的数据(路由)，但当用户单击通知时无法导航到另一个屏幕。 useNotifications： export default useNotifications = () => {
...
useEffect(() => {
registerForPushNotificationsAsync().then((token) => {
setExpoPushToken(token);
浏览 24提问于2021-03-15得票数 0
回答已采纳
我试图在一个Reactive原住民应用程序中的两个页面之间导航。我的实现总是有错误，但我不知道为什么。
我在React中为"Home“和"Settings”站点设置了下面的设置，导航器从中调整
App.js
import Home from "./Home";
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return <NavigationContainer><Home/>
浏览 6提问于2022-05-18得票数 2
回答已采纳
1回答
我有一个导航器(X)，它容纳一个屏幕，让我们称之为N，还有另一个导航器，Y。我需要从导航器Y中的屏幕到根导航器中的N屏幕。我将如何使用react导航6来完成此操作？
根路由器的代码：
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen component={HomeRouter} name="HomeTab" />
</Tabs.Navigator>
</NavigationContainer>
家庭路由器代码(导航器X)：
<Navigatio
浏览 3提问于2022-02-28得票数 2
回答已采纳
我正在使用React Native、Expo和React导航版本5。
这是我的应用程序根目录。
import React from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
impo
浏览 3提问于2020-08-18得票数 0
我试图将堆栈和选项卡都添加到这里的视图中，但是在顶部显示了两个选项卡。我在任何地方都找不到解决方案，因为我想打开另一个不在选项卡导航中的屏幕，例如:当我单击Person按钮时，我需要打开不在选项卡导航中的详细信息屏幕。
如果您看到上面的图像im变得与我单击Profile时相同，则它的显示
人物
人物
在顶端
这是我的密码
import React from 'react';
import { Text, View, Dimensions } from 'react-native';
import { NavigationContainer } from
浏览 2提问于2022-02-05得票数 0
这里我正在使用react导航v6进行测试。
当我按下“转到登录”按钮时，
它会打印"navigation.navigate不是一个函数。
这是我的主导航
const DrawerNavigator = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name="User" component={MainStackNavigator} />
<Drawer.Screen name="Notification" component={
浏览 5提问于2021-09-29得票数 0
2回答
我在react-native中创建了一个嵌套的导航容器，堆栈看起来像这样：
-Main导航容器：-主页-市场导航容器：-市场-购物车-关于
当我回家或四处走动并返回时，它工作正常。然而，当我从Market或cart (我希望转到主页)返回时，它显示一个错误消息：
The action 'POP' with payload {"count":1} was not handled by any navigator.
Is there any screen to go back to?
This is a development-only warning and wo
浏览 0提问于2020-08-16得票数 0
2回答
我在不同的stackoverflow帖子和的原始文档中尝试了多种方法，但仍然无法解决我的问题。
我有一个登录屏幕，在我导航到主屏幕后，我想从主屏幕导航到另一个屏幕，但导航道具未定义。
已尝试按照说明进行操作，但仍失败。
请帮忙，非常感谢。
我已经导入了我的App.js HomePage.js (我想导航到另一个屏幕，但失败了)
目前，我拥有的代码是基于文档的，但在单击按钮时没有任何效果。
import * as RootNavigation from '../config/RootNavigation';
const HomePage = () => {
c
浏览 1提问于2021-06-11得票数 0
1回答
制表符导航器添加标题
、、、
我正在使用React导航。我想将标题添加到我的选项卡导航器组件。我该怎么做呢？ 标签导航功能 const TabNavigation = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Welcome} />
<Tab.Screen name="Favorites" component={Favorites} />
<Tab.Screen name="Profile
浏览 24提问于2020-12-18得票数 0
使用FlatList推送的屏幕将破坏Web上的滚动支持。
尝试了几种建议的解决方案-没有一种有效：
包含带有flex属性的父视图的style={{flex: 1}}Replacing FlatList和带有ScrollView的
对我起作用的是将一个flex属性添加到React导航堆栈导航器的cardStyle中的screenOptions中：
<Stack.Navigator mode="card" screenOptions={{ cardStyle: { flex: 1 } }}>
<Stack.Screen name="MyScreen&#
浏览 1提问于2021-09-28得票数 1
使用react导航v5 (下一步)： 高级问题:从不同父级的子屏幕导航到嵌套子屏幕。 这是我的根导航器 export const AppNavigator = (props): React.ReactElement => (
<Stack.Navigator {...props} headerMode='none' mode={'modal'}>
<Stack.Screen name={AppRoute.AUTH} component={AuthNavigator} />
<Stack.Scre
浏览 13提问于2019-12-12得票数 1
1回答
嗨，我是usign react native with stacknavigator，这是我的代码 import { NavigationContainer } from '@react-navigation/native';
import {Main} from "./Main";
import {Detail} from "./Detail";
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackN
浏览 5提问于2021-01-03得票数 0
回答已采纳
1回答
我想导航到位于HomeStack中的主页详细信息，从位于AboutStack中的关于组件： HomeStack.js export default function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen component={Home} name="Home" />
<Stack.Screen component={HomeDetail} name="HomeDetail" />
浏览 17提问于2020-12-20得票数 1
回答已采纳
无法在选项卡导航的标题中呈现按钮
的导航层次结构
stackNavigation
tabNavigation
- screen 1
- screen 2
- screen 3
我想在页眉处呈现一个按钮
使用以下代码实现这一目标
<Tab.Navigator>
<Tab.Screen name="My Shifts"
options={{ tabBarLabel: 'My',
headerRight: () => (
<
浏览 2提问于2020-07-30得票数 1
回答已采纳
1回答
我正在使用react-Navigation5，我有堆栈导航和内部抽屉导航，我想隐藏一些抽屉的导航屏幕。因此，我在drawerLabel属性中传递null，如下所示
import * as React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import ShowNotes from "../screens/notes/ShowNotes";
const Drawer = createDrawerNavigator();
cons
浏览 1提问于2020-05-25得票数 0
1回答
在我的react原生应用中，我有堆栈导航器和标签导航器，如下所示： const diagnoseNavigation = ({ navigation, language }) => {
return (
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#0089d8",
shadowOpacity: 0
},
浏览 8提问于2021-01-29得票数 0
我仍然在尝试理解这个react导航5.0。仅供参考，我正在使用expo，现在从一个页面导航到另一个页面没有问题，问题是当我为headerRight设置导航时。我在Stack.Navigator中放入了headerRight，因为我想从其他屏幕上访问这个按钮。
所以基本上问题是，我想在headerRight中放置注销按钮，但是当我尝试放置navigation.navigate时，它显示未定义不是一个对象(计算为'_this.props')
然后我尝试调用一个函数(handleClick)，问题是未定义也不是一个对象。
我可以知道我的代码出了什么问题吗？
下面是我的完整代码：
浏览 26提问于2020-06-01得票数 7
回答已采纳
我在BottomTab导航器中嵌套了一个Stsck导航器。并且头是通过堆栈screenOptions配置的。
function AppStackNavigator() {
return (
<Stack.Navigator screenOptions={getScreenOptions}>
<Stack.Screen name="BottomTab" component={BottomTabNavigator}/>
...
</Stack.Navigator>
)
cons
浏览 2提问于2021-11-26得票数 2
我正在尝试使用react导航v5将视图呈现为自定义标头 我的代码： <Stack.Navigator
screenOptions={{
headerTitle: <View> <Text> a </Text><Text> b </Text> </View>
}}>
<Stack.Screen name="Tab" component={tabNavigator}/>
</Stack.Navigator> 我也试过了 const Header =
浏览 11提问于2020-12-03得票数 0
3回答
我有下面的导航堆栈。我试图导航从登录到注册。在android仿真器上，一切似乎都很顺利。但当我试图在博览客户端的android手机上导航时，应用程序就崩溃了。没有错误，它甚至没有命中调试器，即使在异常上暂停。
以下是堆栈的定义：
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './LoginScreen';
import SignUpPhone from '
浏览 11提问于2022-01-25得票数 1
回答已采纳
我在标题的右侧有一个图标，按下该按钮后，我想导航到不同的屏幕。 我对此进行了大量的搜索，但所有的解决方案都是针对类组件的，并且没有可用的官方文档。 我使用的是react原生版本0.61.4。 在按下右边标题中的图标时，我想移动“ProfileScreen”。所有其他导航都工作得很好。我在“HomeScreen”中有一个按钮可以移动到“ResultsScreen”，但无法从标题转到“ProfileScreen”。 下面是我的代码片段 const Stack = createStackNavigator();
const App = () => {
return (
浏览 14提问于2020-04-06得票数 5
回答已采纳
我用的是反应导航：
"@react-navigation/native": "5.2.3",
"@react-navigation/stack": "5.2.18",
而且我有一个自定义的标题，一个特定的屏幕，但是我需要处理后退按钮才能回到以前的屏幕，但是我无法访问导航支柱。
function MainStackScreen() {
return (
<Stack.Navigator initialRouteName={'Splash'}>
浏览 1提问于2020-05-03得票数 1
1回答
我是React Native的新手，我正在尝试导航到我的一个屏幕。我希望屏幕作为模式打开。显然，您应该对Stack.Navigator应用screenOptions={{ presentation: 'modal'}}。屏幕正在打开，但不是作为模式，即它不会从下往上滑动，也不像模式那样起作用。它只是以默认的方式打开。我已经在下面添加了我的导航器代码。我也在嵌套导航器吗？嵌套可能是问题所在吗？ import React from 'react';
import { createNativeStackNavigator } from "@react-nav
浏览 21提问于2021-10-28得票数 0
回答已采纳
我正在做基本的react原生导航示例，但当我试图让它工作时，我得到了错误！
以下是导航模块：
// In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation
浏览 4提问于2021-04-01得票数 0
//我正在构建一个react原生应用程序，我同时使用了抽屉导航和堆栈导航。我遇到的问题是，抽屉和堆栈导航都提供了自己的标题。因此，它会在每个屏幕上显示两个标题，但我只想在特定屏幕上显示一个标题。当我只需要堆栈导航头时，我如何消除抽屉头?？ MainStack.js import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
//The pages to navig
浏览 27提问于2021-10-28得票数 1
回答已采纳
1回答
我似乎无法在我的App.js文件上使用三元身份验证。我正在检查是否存在密钥，然后根据该密钥的存在来显示AuthStack或MainStack。当我从AuthStack转到MainStack (将一个键设置为AsyncStorage)时，我收到错误-有效负载为{‘name’：‘Home’}的'NAVIGATE‘操作未被任何导航器处理。当我注销或删除密钥时，也会发生同样的情况。
根据文档，用户在通过身份验证后似乎会立即导航到应用程序，但这似乎不起作用。
App.js文件
import React, { useState, useEffect } from 'react';
浏览 9提问于2020-11-12得票数 0
我刚接触React native，我想在一个独立于App.js组件的组件中管理导航。 我无法理解如何在单独的组件文件中进行处理 const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer style={{ backgroundColor: '#FFFFFF' }}>
<Stack.Navigator>
<Stack.Screen name=" " component={First
浏览 21提问于2020-04-12得票数 0
我正在尝试构建一个移动应用程序，我在使用react原生导航v5时遇到了一些问题，在他们的文档中，我找到了这个示例代码，但两个代码(我的代码和oficial代码)都有相同的错误，请查看我的代码： // In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
浏览 143提问于2020-10-10得票数 0
回答已采纳
1回答
我正在构建一个react原生应用程序，我对页面导航是如何发生的感到非常困惑。我似乎有一个问题，我的导航跳过一页。
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
component={HomeScreen}
name="Home"
/>
<Stack.Screen
compone
浏览 4提问于2022-07-18得票数 0
在我的functional-component-based React本地应用程序中，我想在不同的屏幕之间导航，每个屏幕都驻留在一个单独的.js文件中。我希望能够像这样在多层深度导航：
Screen1.js <-> Screen2.js <-> Screen3.js <-> Screen4.js
出于某种原因，在中将所有屏幕放置在同一个App.js文件中，每个屏幕都作为自己的独立函数，我认为这是不寻常的开发人员行为。
我希望导航堆栈位于一个NavigationService.js文件中，然后由每个Screen#.js文件导入导航堆栈。我怎样才能实现这一点呢？
浏览 2提问于2021-08-24得票数 0
回答已采纳
1回答
在我的react本机应用程序中，我在选项卡导航中嵌套了堆栈导航。在堆栈导航中，我无法访问设置为初始路径的屏幕。
选项卡导航组件是
<Tab.Navigator initialRouteName='HomeNav' >
<Tab.Screen name="HomeNav" component={HomeNav}
options={{
tabBarIcon: ({ color, size }) => (
<FIcon name="home" color={color} size={
浏览 2提问于2022-04-08得票数 0
1回答
我已经习惯了强类型语言，但对TypeScript还是很陌生的，我很难理解不同方法的类型以及其他库的类型。但我正在使用react导航库，并试图找出与Stack屏幕导航相关的几种类型。
下面是一些来自的示例代码
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen n
浏览 1提问于2020-10-19得票数 2
1回答
嗨，我正在尝试用React-Native制作我的第一个应用程序，但我对React-Native和React也是新手，所以我对它知之甚少。 我有一个嵌套导航的问题。 我总结了源代码，以便更容易地解释错误。 <Tab.Navigator>
<Tab.Screen name='Tab1' component={StackNav}/>
<Tab.Screen name='Tab2' component={TabScreen}/>
</Tab.Navigator>
function StackNav(){
r
浏览 5提问于2021-04-19得票数 0
回答已采纳
1回答
我正在制作一个应用程序，其中我有多种类型的导航，但我不确定如何实现它，直到现在，我的应用程序只有一种类型的导航。我试图阅读有关此特定实现的react导航文档，但我做不到。有人能帮我吗？ 所以你们应该明白，我正在尝试在Tab导航器中实现一个Stack导航器，这样当用户点击地图中的一个点时，一个详细信息页面就会出现在他面前。 以下是我尝试做的事情 import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createBotto
浏览 23提问于2020-07-04得票数 0
回答已采纳
2回答
嘿，我在使用多个Stack.Navigator.时遇到了透明度问题
我创建了2个Stack.Navigators -> --一个用于Screens，另一个用于弹出窗口。问题是，我的弹出窗口有透明的背景，在本例中，我需要在后台显示屏幕。它在react.navigation v4中工作，而现在在v5中，我找不到任何解决方案来解决这个问题。
快餐
*有两个Stack.Navigators，，因为弹出窗口的Stack.Navigator有不同的、复杂得多的screenOptions.此外，在Stack.Navigator中，有一个建议是将一个放在另一个中。在这种情况下，问题是，当您设置父级S
浏览 2提问于2020-02-09得票数 4
1回答
如何在React导航中实现嵌套导航中的深度链接。这里有一个嵌套的堆栈导航器：
function AuthStack() {
return (
<Stack.Navigator>
<Stack.Screen component={Login} name="Login" /> // deep link this screen
<Stack.Screen component={ResetPassword} name="ResetPassword" />
</Stack.Na
浏览 1提问于2021-09-10得票数 1
回答已采纳
我使用的是react导航5.x，我的导航堆栈是这样的。
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Messages" component={Messages} />
</Tab.Navigator>
);
}
function App() {
return (
<Navigation
浏览 2提问于2020-11-29得票数 0
在这段代码中，我想使用navigation.navigate在主屏幕和配置文件屏幕之间切换。但是当我运行这个应用程序时，我得到了以下错误:无法找到变量导航。我一直在寻找解决方案，但似乎找不到。代码如下： import 'react-native-gesture-handler';
import * as React from 'react';
import {View, Text, Button} from 'react-native';
import { NavigationContainer, StackActions } from
浏览 8提问于2020-10-22得票数 1
当试图在一个使用expo的本机应用程序中制作导航系统时，安装了用纱线进行的反应导航，而我无法解决这个错误。
Module not found: Can't resolve 'react-navigation'
这些是package.json中的依赖项
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.0.6",
&#
浏览 3提问于2021-12-04得票数 0
回答已采纳
当我开始学习导航的时候，我面临的问题是当我开始学习导航时，我应用了它，并出现了错误。
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View, Button ,Text } from 'react-native
浏览 0提问于2021-11-17得票数 0
2回答
我在用不同的方式开发反应导航。麻烦在我最后一次尝试的时候。
我正试图使用自定义组件从HomeScreen导航到DetailScreen (某种程度上的按钮被驱逐)。问题是："TypeError: Undefined不是一个对象(计算'this.prop.navigation.navigate')
有人能帮我理解这个问题吗？(注:我用的是反应导航5)
我给你不同的文件：
//fichier app.js
import 'react-native-gesture-handler'
import React from 'react';
im
浏览 0提问于2020-03-08得票数 1
回答已采纳
1回答
我是新来的react本地用户，最近我在我的路线上使用了react导航，我在我的代码中发现了一个错误，我无法解决它，请帮我解决这个问题。
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } f
浏览 3提问于2021-01-26得票数 0
2回答
我有多个嵌套在一起的导航(堆栈和BottomTab)，我希望从导航器的子节点导航到顶部；请考虑以下示例：
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
function AuthNav() {
const Stack = createNativeStackNavigator();
return (
<Nav
浏览 9提问于2022-04-25得票数 0
我创建了一个独立的头文件：
import React, { useContext } from "react";
import { Appbar } from "react-native-paper";
import { UserContext } from "../contexts/UserContext";
import { LanguageContext } from "../contexts/LanguageContext";
import localeSelect from "../services/locale
浏览 1提问于2020-04-30得票数 1
package.json：
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
MainNavigator：
import React from 'react';
import {
createStackNavigator,
createAppContainer,
} from 'react-navigation/stack';
import HomeScreen from './S
浏览 5提问于2021-05-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
