我们可以使用React 16 Portal功能React Native吗？

Question

我使用React Native附带的React 16支持alpha版本的门户网站.在浏览器中并且可以访问DOM时,我们可以使用id或类从组件/文件层次结构中的任何位置访问元素,如下所示:

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

并将其传递给createPortal(child, container)容器arg.反应文档清楚地说容器应该是DOM元素:

第二个参数(容器)是DOM元素.

此函数也是ReactDOMReact Native中不存在的方法.

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

使用案例:

我想在我的应用程序的根目录中渲染动画叠加层,但是从树层次结构深层的父级传递动画值道具(不能使用Redux操作来执行此类操作).

Answer 1

我不认为react-native在它自己的 API 中提供这个功能。但是有一个库可以提供类似的功能。反应网关

根据 的文档react-gateway，

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

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

您必须通过 React Native 组件（如 View 或类似于 .

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 本身。反应原生示例

Answer 2

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

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