我正在构建一个 React Native 应用程序,对于我的导航,我使用 React Navigation (V3)。对于我的 UI 元素,我使用 React Native Elements。
我有一个屏幕,可以在多个导航器中重复使用。有时它位于堆栈的根部,有时它被堆栈推动。我想根据其在堆栈中的位置以编程方式将一个headerLeft
元素添加到此屏幕navigationOptions
,因为如果屏幕位于堆栈的根部,我要么希望显示默认的后退按钮,要么显示汉堡菜单图标(因为堆栈嵌套在抽屉中)。
所以我尝试了以下方法:
export class ScannerScreen extends Component {
static navigationOptions = ({ navigation }) => ({
headerLeft:
navigation.state.index > 0 ? (
undefined
) : (
<Icon type="ionicon" name="ios-menu" onPress={navigation.toggleDrawer} />
),
title: strings.scannerTitle
});
// ...
navigation.state.index
问题是这在这里不起作用undefined
。使用 React 导航如何做到这一点?
编辑:
根据要求,我添加了console.log(navigation)
(通过<Icon />
s的屏幕截图onPress
。)