如何访问选项卡中的导航道具导航-反应导航

Question

我需要放一个浮动按钮，它出现在所有屏幕中，我把它放在底部选项卡导航器的绝对位置，但我无法为它设置onPress导航。我如何在选项卡导航器中访问navigation.navigation？

我的代码

MoreStack.navigationOptions = {
tabBarLabel: 'More',
tabBarIcon: ({ focused, navigation }) => (
<View>
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-more' : 'md-more'}
type='ionicon'
/>
<View
style={{
flex: 1,
position: 'absolute',
bottom: 20,
alignItems: 'center',
right: 10,
}}
>
<TouchableOpacity onPress={() => navigation.navigate('Chat')}>
<Image
source={require('../assets/chat.png')}
style={{ alignSelf: 'center', height: 60, width: 60 }}
/>
</TouchableOpacity>
</View>
</View>
),
};

Answer 1

要能够在任何地方导航，请保留NavigationContainer的引用。

示例：我创建了一个NavigationService，如下所示：

import { CommonActions, StackActions } from "@react-navigation/native";// react navigation 5
import { NavigationActions, StackActions } from "react-navigation"; // react navigation 4
export default class NavigationService {
// core navigator
private static navigator;
// sets the core navigator
static setTopLevelNavigator(navigatorRef) {
NavigationService.navigator = navigatorRef;
}
// naviget to a route
static navigate(name, params?) {
NavigationService.navigator.dispatch(CommonActions.navigate({ name, params }));
}
static goBack() {
return NavigationService.navigator.dispatch(CommonActions.goBack());
}
static popToTop() {
NavigationService.navigator.dispatch(StackActions.popToTop())
}
}

在你的App.js:中

<NavigationContainer ref={(ref) => NavigationService.setTopLevelNavigator(ref)}>
// 
</NavigationContainer>

现在NavigationService有了NavigationContainer的引用，因此您可以通过执行以下操作导航到任何位置：

NavigationService.navigate("SomeScreen");

如果使用的是react navigation 4，请将CommonActions替换为NavigationActions。