React Native中的模态窗口，带有react-navigation

Question

我在React Native中使用react-navigation我想在启动时确定用户是否已登录，如果他/她已经登录，我想打开一个模态窗口（全屏） ）。

这怎么做得最好？我无法在有条件地显示屏幕的react-navigation文档中找到任何内容。

Answer 1

React有一个Modal组件，可用于显示全屏模态。请参阅此处的文档：https://facebook.github.io/react-native/docs/modal.html

要在用户登录时有条件地显示，您可以使用＆＃39;可见＆＃39;属性。 例如。将其放在应用加载到的屏幕上：

<Modal
      animationType={"slide"}
      transparent={false}
      visible={this.state.userIsLoggedIn}
      >

Answer 2

你可以这样做：

＆＃13;

＆＃13;

const ModalNavigator = StackNavigator(
  {
    ModalScreen: { screen: ModalScreen },
  },
  {
    mode: "modal",
    headerMode: "none",
  },
)

＆＃13;

＆＃13;

＆＃13;

Answer 3

看，您需要从导航中更改mode。

const RootStack = StackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

你可以run this code here

截图：

参考文献：

• Opening a full-screen modal
• NavigatorConfig` props