Javascript 反应本机导航-在选项卡更改时触发事件

我正在使用react native和react native导航工作。我遇到了一个与tab事件相关的问题

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

---

提前感谢

对于RNN v1.1.x，有两种方法可以收听选项卡单击

设置一个选项卡单击侦听器 在选项卡中显示的根屏幕中收听选项卡单击 从

倾听屏幕可见性的变化 从：

---

您可以通过使用reducer来实现这一点，只需创建一个方法，在该方法中，您必须检查场景关键点，如果它是您想要的选项卡，您可以在那里执行操作。。。并在路由器中将此函数称为道具。这与我为tab应用程序所做的工作相同

    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>

reducerCreate=params=>{
const defaultReducer=新的Reducer（参数）；
返回（状态、操作）=>{
开关（动作类型）{
case ActionConst.JUMP：
如果（action.key==“Tab1”）{
//Tab1的操作。
}
else if（action.key==“Tab2”）{
//Tab2的操作。
}
}
返回defaultReducer（状态、动作）；
};
};

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

    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>