如何处理选项卡图标按下是当前屏幕，并带有React导航

Question

我将如何检测和实现一个事件处理程序，以便当用户按下当前屏幕的选项卡按钮时？

用例：我正在尝试在选项卡栏中实现一个相机按钮 - 导航到"相机"选项卡会打开相机查看器，并将选项卡图标更改为"拍摄图标"，在此相机选项卡按钮上再次点击，而在此处。相机标签视图将拍摄图片。

我当前在标签导航上实现了TABBARONPRESS函数，但需要将该事件传递到屏幕本身。

  tabBarOnPress: ({ previousScene, scene, jumpToIndex }) => {
    if (previousScene.routeName === 'Camera' && scene.route.routeName === 'Camera') {
      console.log('fire camera picture');
    } else {
      jumpToIndex(scene.index);
    }
  }

理想情况下，我希望能够在相机屏幕上设置OnPress或事件处理程序。我应该如何在目标场景中触发方法 - 我应该通过导航道具或变量传递导航道具，并在屏幕本身上使用某种导航事件？

Answer 1

在componentwillmount上设置一个参数，让我获取对方法

的参考

tabnavigator选项：

  tabBarOnPress: ({ previousScene, scene, jumpToIndex }) => {
    if (previousScene.routeName === 'Camera' && scene.route.routeName === 'Camera') {
      scene.route.params.takePicture();
    } else {
      jumpToIndex(scene.index);
    }
  }

camerascreen

  componentWillMount() {
    this.props.navigation.setParams({
      takePicture: this.takePicture,
    });
    // possibly we might need to also implement below for this issue - 
    // https://github.com/react-navigation/react-navigation/issues/2955
    // InteractionManager.runAfterInteractions(() => {
    //   this.props.navigation.setParams({
    //     scrollToTop: this._scrollToTop,
    //   });
    // })
  }

Answer 2

屏幕组件具有称为listeners的道具，您可以执行以下

    <TabScreen
      name="YourScreenComponent"
      component={YourScreenComponent}
      listeners={({ navigation }) => ({
        tabPress: () => {
          if (navigation.isFocused()) console.log('FIRE CAMARA HERE!');
        },
      })}
    />