我们可以拥有 React 16 门户功能 React Native 吗？

Question

我正在使用React Native，它与支持portals 的React 16 alpha 版本一起提供。在浏览器中并可以访问 DOM 时，我们可以使用 id 或 classes 从组件/文件层次结构中的任何位置访问元素，如下所示：

const modalRoot = document.getElementById('modal-root');

并将其传递给 createPortal(child, container) 容器 arg。 React docs clearly says 容器应该是 DOM 元素：

第二个参数（容器）是一个 DOM 元素。

这个函数也是ReactDOM的一个方法，在React Native中是不存在的。

有没有办法在 React Native 中实现类似的功能？

用例：

我想在我的应用程序的根目录中渲染一个动画叠加层，但将动画值道具从树层次结构深处的父级传递给它（不能对此类事情使用 Redux 操作）。

Answer 1

使用react-native-paper library 可以完成在屏幕上方呈现项目的一种方法。

import * as React from 'react';
import { Text } from 'react-native';
import { Portal } from 'react-native-paper';

const MyComponent = () => (
  <Portal.Host>
    <Text>Content of the app</Text>
  </Portal.Host>
);

export default MyComponent;

Portal 主机呈现其所有子 Portal 元素。例如，您可以在 Portal.Host 中包裹一个屏幕以在屏幕上方呈现项目。

这是描述其用法的链接： https://callstack.github.io/react-native-paper/portal-host.html

Answer 2

我遇到了类似的问题，我想在深度嵌套的子组件的所有内容之上渲染叠加层。我用 React Native 的Modal解决了我的问题

它将其内容呈现在一切之上:) 易于使用且无需额外的依赖项

Answer 3

我不认为react-native 在其自己的 API 中提供此功能。 但是有一个库可以提供类似的功能。 react-gateway

根据react-gateway 的文档，

它也适用于通用（同构）React 应用程序，无需任何额外设置，也适用于 React Native 应用程序。

React Gateway 不直接依赖于 react-dom，因此在一种情况下它可以与 React Native 一起正常工作：

你必须传递 React Native 组件，如 View 或类似于组件 prop 的。

import React from 'react';
import { Text, View } from 'react-native';
import {
  Gateway,
  GatewayDest,
  GatewayProvider
} from 'react-gateway';

export default class Application extends React.Component {
  render() {
    return (
      <GatewayProvider>
        <View>
          <Text>React Gateway Native Example</Text>
          <View>
            <Gateway into="one">
              <Text>Text rendered elsewhere</Text>
            </Gateway>
          </View>
          <GatewayDest name="one" component={View} />
        </View>
      </GatewayProvider>
    );
  }
}

上面的例子取自 repo 本身。 react native example