javascript - React-Native-Navigation - 在选项卡更改时触发事件

Question

我正在使用 react-native-navigation 进行 react-native 工作。我遇到了与选项卡事件相关的问题。

我想在选择特定选项卡时加载数据。

提前致谢

Answer 1

对于 RNN v1.1.x，有两种监听标签点击的方式。

设置标签点击监听器

import {
  NativeAppEventEmitter,
  DeviceEventEmitter,
  Platform
} from 'react-native';

let eventSubscription;

export class TabSelectionListener {
  register() {
    this.unregister();
    eventSubscription = this.getEventEmitter().addListener('bottomTabSelected', (event) => {
      const currentTab = biLabels[event.unselectedTabIndex];
      const targetTab = biLabels[event.selectedTabIndex];
      console.log(`Switching tab from ${currentTab} to ${targetTab}`)
      if (targetTab === dataTab) {
        // load data now
      }
    });
  }

  unregister() {
    if (eventSubscription) {
      eventSubscription.remove();
    }
  }

  getEventEmitter() {
    return Platform.OS === 'android' ? DeviceEventEmitter : NativeAppEventEmitter;
  }
}

在tab显示的root screen中监听tab click

来自docs

class ExampleScreen extends Component {
  constructor(props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  }

  onNavigatorEvent(event) {
    if (event.id === 'bottomTabSelected') {
      console.log('Tab selected!');
    }
    if (event.id === 'bottomTabReselected') {
      console.log('Tab reselected!');
    }
  }
}

监听屏幕可见性变化

来自 docs :

export default class ExampleScreen extends Component {
  constructor(props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  }
  onNavigatorEvent(event) {
    if (event.id === 'willAppear') {
       // Load data now
    }
  }
}