模态化不会覆盖反应导航

Question

每次用户点击特定元素时，我都希望出现一个描述用户点击的所有内容的模态化，我正在使用 Modalize 并尝试使用 portalize，但我无法进行模态化出现在点击栏的第一个。

我的 App.js 导航所在的代码。

import React from "react";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { Provider as AuthProvider } from "./src/context/AuthContext";
import { setNavigator } from "./src/navigationRef";
import AccountScreen from "./src/screens/AccountScreen";
import Exp from "./src/screens/Exp";
import HomeScreen from "./src/screens/LoggedIn/HomeScreen";
import Onboarding from "./src/screens/NotLogged/Onboarding";
import SigninScreen from "./src/screens/NotLogged/SigninScreen";
import SignupScreen from "./src/screens/NotLogged/SignupScreen";
import ResolveAuthScreen from "./src/screens/ResolveAuthScreen";
import TrackCreateScreen from "./src/screens/TrackCreateScreen";
import TrackDetailScreen from "./src/screens/TrackDetailScreen";
import TrackListScreen from "./src/screens/TrackListScreen";

const switchNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  loginFlow: createStackNavigator({
    Onboarding: Onboarding,
    Signup: SignupScreen,
    Signin: SigninScreen,
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow: createStackNavigator({
      Home: HomeScreen,
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen,
    }),
    CreateTrack: TrackCreateScreen,
    Account: AccountScreen,
    Exp: Exp,
  }),
});

const App = createAppContainer(switchNavigator);

export default () => {
  return (
    <AuthProvider>
      <App
        ref={(navigator) => {
          setNavigator(navigator);
        }}
      />
    </AuthProvider>
  );
};

Answer 1

是的，原因是，Modalize 不使用 react-native Modal，它在所有内容之上有单独的 activity 渲染，但您仍然可以使用 react-native Modal 通过将此属性添加到您的模态化。

withReactModal

如果您想在所有内容之上呈现您的模式，您必须 Portal or Portalize 这是第一个

的克隆版本

您应该像这样用 Portal.Host 包装您的应用，

<AuthProvider>
    <Portal.Host>
        <App
           ref={(navigator) => {
           setNavigator(navigator);
          }}
        />
    </<Portal.Host>
</AuthProvider>

然后用这样的门户扭曲你的模态化组件。

const AppModalize = React.forwardRef((props, ref) => {
  return (
    <Portal>
      <Modalize
        {...props}
        ref={ref}
      >
        {props.children}
      </Modalize>
    </Portal>
  )
})
export default AppModalize

现在使用此组件来渲染您的模态。

模态化不会覆盖反应导航

Modalize does not override react navigation

javascript

navigation

react-native

react-navigation