Modalize 不会覆盖反应导航

Question

每次用户点击特定元素时，我希望出现一个描述用户点击的所有内容的模态化，我正在使用Modalize 并尝试使用门户化，但我无法让模态化出现在 Tapbar 的第一个位置.

导航所在的我的 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，它在所有内容之上都有单独的活动渲染，但您仍然可以通过将此属性添加到您的 modalize 来使用 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

现在使用这个组件来渲染你的模态化。