React Native-从选项卡导航中的组件导航到其他屏幕

Question

我在React Native中导航存在问题

我的应用程序具有“选项卡导航”（主屏幕）。第一个组件具有文章列表。当用户点击文章时。详细信息屏幕将显示在主屏幕上

在第一个组件中。我创建了createStackNavigator以打开详细文章屏幕。但是问题在于，它似乎取代了First组件，而不是覆盖主屏幕

这是问题

但是我想要的是下面的

Answer 1

您可以通过在堆栈导航器的特定页面中隐藏选项卡导航器栏来实现。

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  Details: DetailsScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index != 0) {
    tabBarVisible = false;
  }

  return {
   tabBarVisible,
  };
};

在此示例中，FeedStack是选项卡导航器内部的堆栈导航器。 if语句根据ID决定在哪个屏幕中显示标签导航器。对于您的情况，您只想在一个屏幕上显示导航器。我假设该屏幕的ID为0，但如果不是，则可以将其替换为所需的ID。屏幕的ID基于它们在堆栈导航器配置中声明的顺序。