Question

使用 react-navigation 在 React Native 中实现模态窗口

2017-05-22

6533

javascript node.js reactjs react-native react-navigation

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

如何最好地做到这一点？我在 react-navigation 文档中找不到任何有条件显示屏幕的内容。

Answer 1

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

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

您可以在此处运行此代码

屏幕截图：

参考：

Answer 2

你可以这样做：

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

Answer 3

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

若要在用户登录时有条件地显示它，您可以使用“visible”属性。例如，将其放在您的应用加载到的屏幕上：

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