Question

  App.js 
    <Store>
      <Navbar />
      <AppNavigator ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }} />
    </Store>

我想访问

 props.navigation.openDrawer();

来自导航栏，但我得到

undefined is not an object (evaluating 'props.navigation.openDrawer')

onPress
    Navbar.js:70:29
    etc..

如何允许NavBar访问抽屉？

Answer 1

我想您正在关注Navigating without the navigation prop（如果您不这样做，那么您应该这样做）。然后在#!/bin/bash #SLURM CODE BlOCK # Assemble reads if not already done path=$PWD for files in $path/Test_Folder/refs/*.fa do REF=$(basename $files) if [ -e $path//${REF%%.fa}_dir ] #check if directory exists then echo "Directory exists, skipping!" else parallel -j 1 "bwa mem -B 2 -M -t 2 $files {1} \ > {1/.}_${REF%%.fa}.sam\ && echo 'Running bwa mem for {2} using $REF'\ & mkdir -p ${REF%%.fa}_dir \ & mv {1/.}_${REF%%.fa}.sam ${REF%%.fa}_dir"\ :::: < (ls Test_Folder/.fastq) fi done中添加openDrawer方法

NavigationService.js

然后使用

代替

// NavigationService.js

import { DrawerActions } from 'react-navigation-drawer';

...

// add this function
function openDrawer(routeName, params) {
  _navigator.dispatch(DrawerActions.openDrawer());
}


export default {
  ...
  // and export it
  openDrawer
};

props.navigation.openDrawer()

别忘了分别进口

Answer 2

这是我在没有导航道具的情况下使用openDrawer的方式：

在您的App.js（或其他路由器）中

1 /

import { DrawerActions } from '@react-navigation/native';

2 /

export const navigationRef = React.createRef();

3 /

export function openDrawer(routeName, params) {
  navigationRef.current.dispatch(DrawerActions.openDrawer());
}

4 /在您的导航容器内添加此参考

<NavigationContainer ref={navigationRef}>

5 /在创建openDrawer的地方调用函数：

<TouchableOpacity onPress={() => openDrawer()}>
        <Image
          source={tab}
          style={{
            width: 20,
            height: 20,
          }}
        />
</TouchableOpacity>

React Native-在AppNavigator外部访问抽屉导航

2 个答案: