reactjs - 使用 React Native Web 时如何能够选择文件?

标签 reactjs react-native react-native-web

我们正在构建一个使用 React Native 的应用程序,但我们不会为第一个版本发布 native 版本。我们仍在使用网络(为此使用react-native-web)。

但是,我坚持使用文件上传功能,因为要使用 react native 组件,我们需要执行 native 权限(但我们没有在 native 部署它,所以浏览器中没有这样的事情)。但与此同时,我无法使用简单的 <input type=“file” />因为 UI 是基于 React Native 特定标签构建的(例如 <View>/<Image> 等)

有没有办法解决这个问题?

最佳答案

这是一个适合您的建议!

看到在react-native-web中你可以指定平台特定的文件,如果你可以创建一个单独的上传文件组件,比如 'fileUploader.web.js' 你可以将它与这个包结合起来 https://github.com/react-dropzone/react-dropzone

<Dropzone ref="_dp" onDrop={uploadPhotos}>
    <Text>TEXT HERE</Text> // you can remove this completely
</Dropzone>

您实际上可以将拖放区设置为完全不可见,并使用以下命令触发文件选择器:

this.refs._dp.open()

请记住,这仅处理网络平台,您需要为其他平台创建一个fileUploader

关于reactjs - 使用 React Native Web 时如何能够选择文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59495723/

相关文章:

javascript - 语义 react 模态奇怪的高度行为

javascript - 如何将一个简单的 React JS 应用程序从根目录移动到子目录中?

javascript - 当Reducers更新状态时,路由重定向不会发生

react-native - 使用 RN、React Navigation 和 React Native Web 的通用应用程序最佳实践

javascript - 检查值在编辑函数中返回未定义

css - 无法在 React Js 元素中使用 Font Awesome

reactjs - 即使图像路径正确,React-Native -Elements Avatar 也不会渲染并仅显示灰色背景

react-native - 从 react-native 链接中排除包

javascript - Expo Web 编译失败 "optional chaining"

react-native - 如何将我的 React Native Storybook 构建到 Web?