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

Question

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

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

提前致谢

Answer 1

至于RNN v1.1.x，有两种方式来监听tab点击。

设置选项卡单击侦听器

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;
  }
}

在选项卡中显示的根屏幕中收听选项卡单击

从文档

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!');
    }
  }
}

聆听屏幕可见性变化

来自文档：

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
    }
  }
}

Answer 2

您可以通过使用 reducer 来获得此功能，只需创建一个方法，您必须在其中检查场景键，如果它是您想要的选项卡，您可以在那里执行您的操作......并在您的路由器中将此功能作为道具调用。这与我为我的标签应用程序所做的工作相同。

    reducerCreate = params => {
      const defaultReducer = new Reducer(params);
       return (state, action) => {
         switch(action.type){
            case ActionConst.JUMP:
                if(action.key ==="Tab1") {
                    //Action for Tab1.
                }
                else if(action.key ==="Tab2" ) {
                    //Action for Tab2.
                }
        }
        return defaultReducer(state, action);
    };
};

      <Router
                createReducer={this.reducerCreate}
                navigationBarStyle={styles.navBar}
                titleStyle={styles.navBarTitle}
            >

               <Scene initial 
                  style={{paddingTop: 0}}
                  key="home"
                  component={Home}
                  >
                    <Scene 
                        key="Tab1"
                        component={Tab1View}
                     />
                    <Scene 
                        key="Tab2"
                        component={Tab2View}
                    />
            </Scene>
  </Router>