React Native 中的模态 window 和反应导航

Question

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

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

Answer 1

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

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

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

Answer 2

你可以这样做：

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

Answer 3

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

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

你可以run this code here

截图：

参考文献：

React Native 中的模态 window 和反应导航

Modal window in React Native with react-navigation

javascript

node.js

reactjs

react-native

react-navigation