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,
    //   });
    // })
  }

如果选项卡图标按下是当前具有反应导航的屏幕

1 个答案: