gpt4 book ai didi

react-native - 如何从 stack.navigation 之外的组件使用 navigation.navigate

转载 作者:行者123 更新时间:2023-12-03 09:45:21 29 4
gpt4 key购买 nike

我有一个使用 React Native 的应用程序,我正在使用 react-navigation (5.2.9)。

我构建了一个 Stack.Navigator,我有我的屏幕,但我希望页脚组件在外面,以便它在所有屏幕中呈现。问题是,我无法从页脚导航,这是我需要做的,因为页脚有几个应该改变屏幕的按钮:

const Stack = createStackNavigator();

const App = () => {
return (
<Provider store={store}>
<NavigationContainer>
<Header />
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false
}}
/>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{
headerShown: false
}}
/>
</Stack.Navigator>
<Footer />
</NavigationContainer>
</Provider>
);
};

如何将导航 Prop 传递给页脚组件?

最佳答案

尝试这个:

创建一个名为:RootNavigation.js 的新文件

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}

// file where you have the navigation

import {navigationRef} from './path/to/RootNavigation';

<NavigationContainer ref={navigationRef}>
.....
<Footer />
</NavigationContainer>

而 Footer.js 应该是这样的:

// Footer.js

import React from 'react';
import {View, Button} from 'react-native';
import * as RootNavigation from './path/to/RootNavigation';

const Footer= () => {
return (
<View>
<Button
title={'Go to'}
onPress={() =>
RootNavigation.navigate('screenName ', {userName: 'Lucy'})
}
/>
</View>
);
};

export default Footer;

有关更多信息,您可以阅读文档。 https://reactnavigation.org/docs/navigating-without-navigation-prop/

关于react-native - 如何从 stack.navigation 之外的组件使用 navigation.navigate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61170112/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com