问题标签 [react-native-web]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
583 浏览

reactjs - 为什么 TypeScript 不解析我的“react-native-web”代码?(不使用`create-react-native-app`)

得到:

错误信息

为了:

代码

我认为问题可能是我得到的别名 b/c 的 linter 错误react-nativereact-native-web由于某种原因,TypeScript 无法弄清楚......)。能够通过npm i -D react-native @types/react-native.

但是,仍然得到同样的错误。

接下来,我尝试将我的 SFC(无状态功能组件)转换为类组件。还有:

类似的错误信息

所以我想知道为什么即使我配置了 TypeScript也会收到此错误消息。

0 投票
0 回答
277 浏览

react-native - 用于 web 的 React Native 是否已准备好投入生产

我应该使用 react-native-web 吗?对我来说一切都很好,除了路由器。供参考https://github.com/necolas/react-native-web

0 投票
0 回答
117 浏览

react-native - 你如何为 ios 使用 zIndex 或海拔

我有一个用于 web 和 ios 的跨平台应用程序,带有 react-native-web 和 expo。登录期间有一段时间正在处理它,我正在渲染一个微调器。

微调器仅显示在网络上。

0 投票
1 回答
1191 浏览

react-native - 网页导航 react-navigation

所以我想知道是否有一个全面的示例或库可以用于在网络和本机方面进行导航。

也许一个工作示例可以尝试使用模态、抽屉和所有花哨的东西。

在 web 上使用 react-navigation 3.0 是什么感觉?是否完全兼容?是否有一个在线示例可以使用并从中汲取灵感?react-navigation 文档上的示例非常做作并且不是很清楚,是否有人从事过此类项目。

谢谢。

以下是我遇到的一些来源。

https://blog.bitsrc.io/how-to-react-native-web-app-a-happy-struggle-aea7906f4903

使用上述案例中提供的 HOC 怎么样?

似乎是一个巧妙的解决方案。

https://pickering.org/using-react-native-react-native-web-and-react-navigation-in-a-single-project-cfd4bcca16d0

https://reactnavigation.org/blog/#ecosystem-and-web-support

https://reactnavigation.org/docs/en/web-support.html

0 投票
1 回答
101 浏览

javascript - Gatsby,React Native Web - GraphQL 错误预期类型 Craft_SectionsEnum

背景

我在 Craft CMS 中创建了一个名为 的新部分forVenues,并且能够在 CraftQL 测试端点中查询数据,如下所示:

问题

当我尝试<StaticQuery>在我的 React Native Web Gatsby 应用程序的组件中运行查询时,我收到以下错误:

这表明 Gatsby 项目尚未更新 CMS 中哪些部分可用,但我不知道如何解决此问题。

笔记

我已经尝试过清除 Gatsby 缓存、重新启动项目、重新启动托管 CMS 并更改我的查询,但均无济于事。任何帮助表示赞赏,谢谢。

0 投票
1 回答
1377 浏览

react-native - 从 react-native-web 应用程序使用参数访问 URL

我正在开发一个 React-Native 应用程序,我已使用 React-Native-Web(托管在http://myapp.com上)将它移植到 Web。

我现在想做的是制作自定义 URL,就像http://myapp.com/some/path/here/with/?params=something我可以在我的应用程序中访问它一样,在解析它后调度适当的导航操作。

我的问题是,我如何访问/some/path/here/maybe/with/?params=something

使用 webpack 开发服务器,每当我尝试访问 saylocalhost:8080/asdf时,它都会出错Cannot GET /asdf

我正在使用 react-navigation 3.3.2(带有手势处理程序的 Web 兼容性补丁)。我已经访问过这个 SO question,但它谈到了从链接到屏幕的紧密耦合映射。

我想要的是相当简单的东西,我只需要我的反应应用程序中的某个路径,以便我可以以某种方式对其进行操作。

0 投票
0 回答
377 浏览

typescript - react-router-native 目前没有启用对实验性语法“classProperties”的支持?

我目前正在学习如何设置一个使用 TypeScript 的 react-native-web,并且在 react-router-native 抛出错误时遇到错误:

当前未启用对实验性语法“classProperties”的支持。

检查 node_modules 文件夹并metro-react-native-babel-preset添加@babel/plugin-proposal-class-properties.

尝试将plugins部分添加到babelinpackage.json但仍然出现错误:

这是我目前的设置

已安装的软件包package.json

对于metro.config.js

0 投票
1 回答
2208 浏览

javascript - 尝试导入错误:将 react-native 编译为 react-native-web 时,未从“./apiFetcher”导出“ApiGet”

我正在构建反应原生应用程序,它在 Android 和 iOS 上都成功运行。我想将 react-native 应用程序转换为网络应用程序。我尝试遵循教程:https://medium.com/@jonnykalambay/your-first-hybrid-app-in-15-minutes-react-native-on-the-web-2cc2646051e 以及一些来源(https:// /react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html )。但是当我在网络上运行时,出现错误:尝试导入错误:'ApiGet'未从'./apiFetcher'导出。

我的代码:

  • 我尝试了一个使用这种语法导入、导出进行测试的示例。它运行成功。我的代码同时使用 ES5 和 ES6。当我在 react-native 中运行代码时,没关系。我使用 ES5 创建了一个演示 react-native-web,也可以。
  • 我的 package.json:

请帮我。感谢提前。

0 投票
1 回答
428 浏览

npm - 是否可以覆盖 package.json 中的“模块”字段?

我将 React-Native-Web 导入到我的项目中,当我的转译过程遇到我不熟悉的错误时,我正在转译它。

通读之后,我意识到该库为我提供了代码的转译版本,尽管这不是我所期望的。

https://github.com/necolas/react-native-web/tree/master/packages/react-native-web

这是包的来源,在 .json 文件中。

  • “模块”:“dist/index.js”
  • "main": "dist/cjs/index.js",

有没有办法告诉 npm 这些选项中有哪些可供选择?

0 投票
1 回答
153 浏览

reactjs - ReactJS Image 或其他类似组件重用图像位图

我在 ReactJS 中制作了一个聊天界面,聊天记录中的每一项都一遍又一遍地显示相同的头像图标。目前我面临的问题是,当在聊天日志中添加新项目时,此图像会在每个列表项中闪烁,看起来不太像样。

我想知道是否有办法重用Component(很可能不是)或位图数据,以便一旦加载到内存中,它可以更快地显示而不会出现可察觉的闪烁。我曾尝试使用数据 URL,但没有多大用处。

根据评论中的请求进一步详细信息:

我有一个单独Component的来显示每个聊天日志项。它包含一个Image显示头像的组件。

在顶部日志中,我使用的是 a FlatList,并且在renderItem渲染所述聊天日志组件。data每当发送或接收任何消息时,它都会附加到inFlatList指向的数组中。

每当添加一个项目时,列表都会重新呈现,从而导致Image再次创建(我已经搜索但没有发现将项目附加到 aFlatList而不影响现有子级的任何好处)。因此,我相信解决方案在于使图像加载更快,以便重新渲染不那么可感知。