我有一个使用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>
);
};
如何将导航道具传递到页脚组件?
来自文档。https://reactnavigation.org/docs/connecting-navigation-prop/
import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
function GoToButton({ screenName }) {
const navigation = useNavigation();
return (
<Button
title={`Go to ${screenName}`}
onPress={() => navigation.navigate(screenName)}
/>
);
}
我最终建立了一个名为screen的组件,它将只包装屏幕的内容并根据props渲染页眉/页脚:
import React from 'react';
import { View } from 'native-base';
import style from './style';
import Footer from '../../footer';
import Header from '../../header';
const Screen = ({
footer,
header,
children,
navigation
}) => (
<View style={style.screen}>
{ header && <Header navigation={navigation} />}
{ children }
{ footer && <Footer navigation={navigation} />}
</View>
);
export default Screen;
然后像这样包装我的应用程序的屏幕:
<Screen header footer navigation={navigation}>
... screen content
</Screen>
如果无法解决该问题,我认为这是最好的方法。
Stack.Screen
组件之外的组件不接收导航道具。因此,在这种情况下,您必须使用页脚组件中的引用来获取NavigationContainer
,如下所示:
const myRef = React.createRef()
创建参考<NavigationContainer ref={myRef}>
,然后myRef.current?.navigate(name, params)
。 全部解释为here。此处的文档将引用的创建分开在一个新文件中,以允许您导入引用而没有依赖关系循环/问题。正如文档所述,您现在可以在任何js模块中调用RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });
,而不仅仅是在react组件中。
不过,根据您的情况,您不需要在单独的文件中引用。
const Stack = createStackNavigator();
const navigationRef = React.createRef();
const App = () => {
return (
<Provider store={store}>
<NavigationContainer ref={navigationRef}>
<Header />
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false
}}
/>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{
headerShown: false
}}
/>
</Stack.Navigator>
<Footer navigationRef={navigationRef}/>
</NavigationContainer>
</Provider>
);
};
并且在<Footer/>
中使用navigationRef.current?.navigate(name, params)
尝试一下:
创建一个新文件,名为:RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
import {navigationRef} from './path/to/RootNavigation';
<NavigationContainer ref={navigationRef}>
.....
<Footer />
</NavigationContainer>
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/