使用 React Native Web 时如何选择文件？答案

【问题标题】：How to be able to select file when using React Native Web?使用 React Native Web 时如何选择文件？
【发布时间】：2019-12-27 03:42:59
【问题描述】：

我们正在构建一个使用 react native 的应用程序，但我们不会为第一个版本发布原生版本。我们仍在使用网络（为此使用react-native-web）。

但是，我被文件上传功能卡住了，因为要使用 react 原生组件，我们需要执行原生权限（但我们没有原生部署它，所以浏览器中没有这样的东西）。但与此同时，我无法使用简单的<input type=“file” />，因为 UI 是建立在 react 原生特定标签之上的（例如 <View> / <Image> 等）

有解决办法吗？

【问题讨论】：

标签： reactjs react-native react-native-web

【解决方案1】：

这里有一个对你有用的建议！

看到在 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>

您实际上可以将 dropzone 设置为完全不可见并触发文件选择器：

this.refs._dp.open()

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

【讨论】：

【解决方案2】：

react-native-web 中没有兼容的控件。您可以使用

进行开发

https://github.com/kamilkp/react-native-file-transfer

https://github.com/g6ling/React-Native-Tips/tree/master/How_to_upload_photo%2Cfile_in%20react-native

【讨论】：

【解决方案3】：

您是否尝试在<View> </View> 之间使用<input />？这应该工作：

<View>
   <input type="file" onChange={fileSelectedHandler} accept="image/*" />
 </View>

【讨论】：