react-native 是否支持 react-click-outside？

Question

我正在将 react-js 项目移植到 react-native。我想重用 react-click-outside 库。但是在将其添加到我的依赖项并使用handleClickOutside() 方法时，我会考虑以下问题。错误信息是：

开发服务器返回响应错误码：500

网址： http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

Body: {"message":"Unable to resolve module react-dom from /Users/xxx/ReactNativeProjects/react_native_prototype/node_modules/react-click-outside/dist/index.js： 模块映射或这些目录中不存在模块:\n /Users/xxx/ReactNativeProjects/react_native_prototype/node_modules\n\n这个 可能与 https://github.com/facebook/react-native/issues/4968\n要解决试试 以下：\n

1. 清除守望者手表：watchman watch-del-all。\n
2. 删除node_modules 文件夹：rm -rf node_modules && npm install。\n
3. 重置打包程序缓存：rm -fr $TMPDIR/react-* 或 npm start -- --reset-cache

我完成了所有步骤，但在 Android 和/或 iOS 模拟器中运行应用程序时仍然收到相同的错误消息。

然后我查看了/Users/xxx/ReactNativeProjects/react_native_prototype/node_modules/react-click-outside/dist/index.js文件，发现该库从react-dom 导入了一些东西。但我认为 react-native 不使用任何 DOM？是对的吗？所以 react-click-outside 似乎只与 react-js 兼容，但与 react-native 不兼容。我对吗？或者有没有人找到一个简单的解决方案来模拟handleClickOutside()behaviour？

我的代码如下所示：

import React from 'react';
(...)
import clickOutside from 'react-click-outside';

const newClass = class TrafficNodeFinder extends React.Component {

    (...)    
    handleClickOutside() {
        this.setState({
            listOfNodes: ds.cloneWithRows([])
        });
    }

    (...) 


}

export default clickOutside(newClass);

我现在得到的错误如下所示：

找不到变量：文档

WrappedTrafficNodeFinder_componentDidMount index.js:17

ReactCompositeComponent.js:353

测量LifeCyclePerf ReactCompositeComponent.js:85

ReactCompositeComponent.js:352

通知所有 CallbackQueue.js:73

关闭 ReactNativeReconcileTransaction.js:36

全部关闭 Transaction.js:222

执行 Transaction.js:163

batchedMountComponentIntoNode ReactNativeMount.js:77

执行 Transaction.js:149

批量更新 ReactDefaultBatchingStrategy.js:65

批量更新 ReactUpdates.js:111

渲染组件 ReactNativeMount.js:141

渲染 ReactNative.js:31

渲染应用程序 renderApplication.js:33

运行 AppRegistry.js:76

运行应用程序 AppRegistry.js:105

__callFunction MessageQueue.js:236

MessageQueue.js:108

守卫 MessageQueue.js:46

callFunctionReturnFlushedQueue MessageQueue.js:107

我只是试图模拟 react-click-outside 的行为。我想已经包围了组件，该组件将使用 View-Elements 对其外部的点击做出反应。但似乎 Views 和其他 react-native UI 组件没有任何点击处理程序。当我用 TouchableHighlight 包围我的视图时，它只有在我放置填充时才可点击。否则，所有子组件都会“消耗”父组件的点击事件。也许我可以以某种方式告诉我的视图层次结构中的孩子将点击事件传递给那里的父母？

Answer 1

不，react-click-outside 依赖于 document.addEventListener，但是 React Native 中没有文档，因为没有底层 DOM。