问题标签 [react-native-web]

我正在尝试创建一个 react-native-for-web 应用程序来构建 iOS 和 Web 平台。我的问题的一个解决方案是让 xcode/mac 模拟器在 iOS 版本的热重载下运行，同时还运行一个 "react-native-web": "^0.9.x" 应用程序的 web 版本。

我用谷歌搜索了如何开始其中的一篇，发现前几篇文章是由create-react-native-web-app的创建者写的，所以我决定尝试这种方法。然而，这是一场艰苦的战斗。

但首先，似乎开箱即用的部分是 Web 部件。在我的第一次尝试中，运行后npx create-react-native-web-app demo-app，yarn web立即工作。:)

但是 yarn iOS 无法构建，并且存在多个问题。

我有node -v >> v11.5.0。我在 Mohave，已经设置了 xcode 10.1（用于 iOS 开发）。

• 我需要安装xcode 10.1 命令行工具。
• 然后，我需要yarn iOS
• 然后打开creaternwapp项目ios/并将Project Settings > Build System更改为Legacy Build System。
• 然后我不得不尝试在 xcode 中构建它。（事实证明这很重要，即使构建会失败）
• 然后，(cd node_modules/react-native/third-party/glog-0.3.4/ && ./configure)// 这些数字可能会明显改变，具体取决于安装

• 无论我是否需要，我都改变了.babelrc：

  /li>

至：

• 然后：npm install && npm audit fix然后紧随其后，yarn install纱线可以重新获得控制权。

此时yarn ios成功，但setTimeout模拟器上显示错误。我对此进行了研究，显然当 react-native 安装未完成时会发生此类错误，建议的解决方案是yarn upgradereact-native。但yarn upgrade react-native@0.57.8对我没有任何改变。

我创建了一个 react-native 应用程序，通过react-native init ReactNativeWeb.

然后，我按照此处的说明添加 react-native-web 。

我还在index.web.js我的应用程序的根文件夹下添加了一个文件。文件如下所示：

这是我的webpack.config.js文件：

而且，这是我在.bablerc文件中的内容：

但是，当我尝试使用以下命令运行它时，出现以下错误。

错误：

./index.web.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：TypeError：无法在 Scope.moveBindingTo 处读取 null 的属性“绑定”（/Users/aliyar/ReactNativeWeb /node_modules/@babel/traverse/lib/scope/index.js:867:13) 在 BlockScoping.updateScopeInfo (/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index. js:364:17) 在 BlockScoping.run (/Users/aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12) 在 PluginPass.BlockStatementSwitchStatementProgram (/Users/ aliyar/ReactNativeWeb/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24) 在 newFn (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/visitors.js :193:21) 在 NodePath。_call (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:53:20) 在 NodePath.call (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path /context.js:40:17) 在 NodePath.visit (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/path/context.js:88:12) 在 TraversalContext.visitQueue (/Users/aliyar/ ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:118:16) 在 TraversalContext.visitSingle (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:90:19) @multi (webpack)-dev-服务器/客户端？js:88:12) 在 TraversalContext.visitQueue (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:118:16) 在 TraversalContext.visitSingle (/Users/aliyar/ReactNativeWeb/node_modules/@ babel/traverse/lib/context.js:90:19) @ multi (webpack)-dev-server/client?js:88:12) 在 TraversalContext.visitQueue (/Users/aliyar/ReactNativeWeb/node_modules/@babel/traverse/lib/context.js:118:16) 在 TraversalContext.visitSingle (/Users/aliyar/ReactNativeWeb/node_modules/@ babel/traverse/lib/context.js:90:19) @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./index.web.js main[2]

知道为什么我会收到错误吗？

堆栈跟踪没有指向问题的根源：

.

这指向：

应用程序.js:84

堆栈跟踪下方是显示 setState 的片段，因此我添加了该状态的 console.log 以查看它是否是一个承诺：

但这不是一个承诺，只是一个普通的 js 对象。

如何找到错误的根源？

有人在 SSR react-native-web 时成功进行代码拆分吗？我可以实现 SSR 并且可以在没有 SSR 的情况下进行代码拆分，但无法同时执行这两项操作

React native Version: 0.57.3

Android: Google Pixel 3 API - 28

iOS: iPhone 8 plus - 11.4

react-native-web: 0.10.0

I am trying to run my react-native-web app which is running fine on the web. I have run into this issue after trying to solve babel plugin issues on mobile side. I have used babel-upgrade for auto babel upgrade. I am posting my package.json and babelrc here.

package.json :

.babelrc :

These are the solutions I have tried so far and didn't work :

1) react-native start --reset-cache

2) Remove all node_modules and install them again

我想将 React Navigation 3.x 与 react-native-web 结合使用。通过“入门”步骤，

只需导入：

并更新 babel 配置，我最终收到此错误：

./node_modules/@react-navigation/native/node_modules/react-native-gesture-handler/Swipeable.js 未找到模块：无法在“D:\”中解析“react - native/Libraries/Animated/src/AnimatedEvent ” react_native\App\app\node_modules@react-navigation\native\node_modules\react-native-gesture-handler'

在我的研究中，我在 github 上发现了一些可能与该错误有关的主题： https ://github.com/kmagiera/react-native-gesture-handler/pull/406

https://github.com/react-navigation/react-navigation/issues/5632

我已经使用了这个“修复”（来自上面的 github 拉）作为依赖：

但再次出现类似的错误：

./node_modules/@react-navigation/native/node_modules/react-native-gesture-handler/DrawerLayout.js 未找到模块：无法解析'D:\ 中的'react - native/Libraries/Animated/src/AnimatedEvent ' react_native\App\app\node_modules@react-navigation\native\node_modules\react-native-gesture-handler'

如何使用反应导航在 Web 上实现工作导航？也许使用其他依赖版本？还是我应该使用反应路由器？

我正在使用博览会，反应原生并与反应原生网络一起反应。我正在升级到 expo@32，因此 react-native@57.1

我在手机上运行一切都很好，但不是在网络上。经常显示依赖错误：

我需要确保我所有的包版本都是兼容的。我查看了 react native 和 expo 的更新日志，并更新了所有内容。

我不知道如何检查更多以及如何调试我的错误。

这是我的 package.json

我有一些关于 React Native Web 的问题。我还没有真正了解它是如何工作的，所以我希望能得到一些答案。

• 确切地说，当我们将 React Native “别名”为 Web 时会发生什么？
• 与 Expo 合作时，为什么某些软件包不可用？例如，LinearGradient 得到一个错误，指出它无法找到。
• 我想使用Netlify Identity Widget，但它呈现在 HTML 中。我如何将它与 React Native Web 一起使用？

那么总的来说，我如何在 React Native Web 中进行开发呢？我需要知道如何移植 npm 包以便我可以使用它们。

非常感谢您的任何建议！

我正在使用 react native web 设置 web 应用程序。我想为 UI 组件使用本机基础，但无法在 Web 中使用它。我已遵循此说明https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/web-support

由于这个关于图书馆的官方信息。

我使用以下命令创建 web 应用程序 yarn create react-app test-web --typescript

然后添加 yarn add react-native@0.55.4 react-native-web@0.10.0 react -art@16.8.2 yarn add -D @types/react-native@0.55.4

我的项目中没有 babel 配置，那么我该如何解决这个问题

我的 package.json 文件

我构建了用于调试的 android 应用程序，脚本在 cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug 不使用的情况下运行，因为使用了RNN 推荐指南react-native run-android中的 react-native-navigation v2 。

但是，构建失败并出现此错误。

此外，其他构建类型（preRelease，release）无法构建相同的此错误。

不能指望为什么会出现这个错误，因为它发生在构建发布版本 android apk 之后并且没有更改任何 android 代码。

请任何提示您所知道的。

安卓配置

• android/app/build.gradle

• 安卓/build.gradle

环境