如何使用 react-native 让 TabBarIOS 弹出到导航堆栈的顶部？

Question

我有以下 TabBarIOS.Item 设置：

          <TabBarIOS.Item
            selected={this.state.selectedTab === 'tab1'}
            title='Tab 1'
            icon={require('./Components/Icons/IconImages/Tab1Icon.png')}
            onPress={() => {
              this.setState({
                selectedTab: 'tab1'
              });

             }}>
            <MyNavigatorIOS client={this.state.client} initialStep={this.state.initialStep} />

          </TabBarIOS.Item>

我正在尝试根据 this example in the react native docs 使用 onPress 事件触发 this.props.navigator.popToTop();。但是，区别在于我希望 TabBarIOS onPress 事件触发 popToTop() 而不是子 MyNavigatorIOS 组件。我怎样才能做到这一点？

Answer 1

我遇到了同样的问题，您可以做的是向您的视图和其中的导航器添加一个引用，如下所示：

          this.refs.timeline.refs.timelineNavigator.popToTop()

因此 TabBar 代码如下所示：

    <TabBarIOS.Item
      systemIcon="history"
      title="Timeline"
      badge={this.state.timelineBadge}
      selected={this.state.selectedTab === 'timeline'}
      onPress={() => {
        if (this.state.selectedTab === 'timeline') {
          this.refs.timeline.refs.timelineNavigator.popToTop()
        } else {
          this.setState({ selectedTab: 'timeline' })
        }
      }}>
      <Timeline
        ref="timeline"
      /> 
    </TabBarIOS.Item>

如何使用 react-native 让 TabBarIOS 弹出到导航堆栈的顶部？

How can I get TabBarIOS to pop to the top of the navigation stack using react-native?

react-native

tabbar

tabbarios