利用React Native Root Siblings轻松创建高效覆盖层

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import RootSibling from 'react-native-root-siblings';
 
// 创建一个覆盖层
export function showOverlay(text, onPress) {
  const sibling = new RootSibling(
    <OverlayBox onPress={onPress}>
      <Text>{text}</Text>
    </OverlayBox>
  );
 
  // 关闭覆盖层的函数
  function hideOverlay() {
    sibling.destroy();
  }
 
  // 返回关闭覆盖层的函数
  return hideOverlay;
}
 
// 覆盖层样式组件
const OverlayBox = ({ children, onPress }) => (
  <TouchableOpacity style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} onPress={onPress}>
    {children}
  </TouchableOpacity>
);

这段代码定义了一个showOverlay函数，它使用react-native-root-siblings库创建一个全屏覆盖层，并返回一个用于关闭该覆盖层的函数。覆盖层可以接受文本内容和点击事件处理函数作为参数，并在点击时执行这些处理函数。这是一个简单的例子，展示了如何使用React Native创建和管理覆盖层。