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

Question

I am using react-navigation in React Native and I want, on startup, to determine if the user is logged in, and if he/she is already logged in, I want to open a modal window (full screen).

How is this best done? I cannot find anything in the react-navigation docs where a screen is conditionally shown.

Answer 1

React has a Modal component that you can use to display a full-screen Modal. See the docs here: https://facebook.github.io/react-native/docs/modal.html

To display it conditionally if the user is logged in you can use the 'visible' property. Eg drop this on the screen that your app loads to:

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

Answer 2

you can do like this:

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

Answer 3

Look, you needs to change the mode from Navigation.

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

You can run this code here

Screenshots:

References:

• Opening a full-screen modal
• NavigatorConfig` props