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

Question

我在 React Native 中遇到导航问题

我的应用有标签导航（主屏幕）。第一个组件有一个文章列表。当用户点击文章时。一个详细的文章屏幕将出现在主屏幕上

在第一个组件中。我创建了一个createStackNavigator 来打开详细文章屏幕。但问题是它似乎替换了第一个组件而不是覆盖主屏幕

问题来了

但我想要的如下所示

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 取决于它们在堆栈导航器配置中声明的顺序。