Wix react-native-navigation 更改选项卡和推送屏幕答案

【问题标题】：Wix react-native-navigation change Tab and push screenWix react-native-navigation 更改选项卡和推送屏幕
【发布时间】：2019-01-23 01:58:11
【问题描述】：

如何同时切换标签和推送屏幕？按下按钮时，我想切换到另一个选项卡并推送一个新屏幕。可能吗？

class Example extends Component {
      buttonHandler = () => {
        this.props.navigator.switchToTab({
          tabIndex: 0
        });
        this.props.navigator.push({  // actually this navigator's tabIndex is 0 
          screen: "dc.Examplecreen",
          title: "Exampe", 
          passProps: {
            lesson : this.props
          }    
       });
   }
}

【问题讨论】：

您找到解决方案了吗？我也有同样的需求。

标签： javascript react-native react-native-navigation

【解决方案1】：

您可以使用以下代码切换选项卡

Navigation.mergeOptions(this.props.componentId, {
  bottomTabs: {
    currentTabId: this.props.componentId
  }
});

并使用

推送

Navigation.push(this.props.componentId, {
  component: {
    name: 'example.PushedScreen',
    passProps: {
      text: 'Pushed screen'
    },
    options: {
      topBar: {
        title: {
          text: 'Pushed screen title'
        }
      }
    }
  }
});

您可以结合这两个代码创建一个函数。不是我知道的最好的解决方案，但有效！

【讨论】：

【解决方案2】：

没有任何方法可以将passProps 与switchToTab 联系起来。我也在react-native-navigation 中找到但没有得到任何解决方案。更改选项卡并使用全局变量推送。

我正在使用react-native-navigation 版本1.1.463

更改标签switchToTab

global.isComeFromBooking = true
this.props.navigator.switchToTab({
   tabIndex: 2,
});

在索引 2 的标签中 setOnNavigatorEvent

componentDidMount() {
    this.props.navigator.setOnNavigatorEvent((e) => {
      if (e.id == 'willAppear' && global.isComeFromBooking) {
        this.props.navigator.push({
          screen: 'Reservations',
          title: 'Bookings',
          animated: true,
          style: {
            backgroundColor: 'black',
          },
          backButtonTitle: '',
        });
        global.isComeFromBooking = false
      }
    });
}

【讨论】：