Question

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

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在自己的API中提供此功能。但是有一个库提供类似的功能。 react-gateway

根据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本身。 react native example

Answer 2

我有类似的问题，我想在深层嵌套的子组件的所有内容上渲染叠加层。我用React Native＆＃39; s Modal

解决了我的问题

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

Answer 3

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

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

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

用例：

3 个答案: