模态化不会覆盖反应导航

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，它在所有内容之上都具有单独的活动渲染，但是您仍然可以通过向您的对象添加此属性来使用react-native Modal模范化。

• withReactModal

如果您想在所有内容之上呈现模态，则必须使用Portal或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

现在使用此组件来呈现您的模型化。