使用 React Native Web 时如何能够 select 文件？

Question

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

然而，我被文件上传功能困住了，因为要使用 React Native 组件，我们需要做本地权限（但我们不是本地部署它，所以在浏览器中没有这样的东西）。但与此同时，我无法使用简单的 <input type=“file” />，因为 UI 是基于 React 原生特定标签（例如 <View> / <Image> 等）构建的。 )

有解决办法吗？

Answer 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>

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

this.refs._dp.open()

请记住，这仅适用于 Web 平台，您需要为其他平台创建 fileUploader

Answer 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

Answer 3

您尝试过在 <View> </View> 之间使用 <input /> 吗？这应该有效：

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

使用 React Native Web 时如何能够 select 文件？

How to be able to select file when using React Native Web?

reactjs

react-native

react-native-web