标签: react-native-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

是否可以使用 React Native Web实现 Flatlist，在其中预先添加数据，同时保持可见内容？

现在，当您添加某些内容时，它会跳到 Flatlist 的顶部。我使用onContentSizeChange在更新后强制移动滚动位置，但体验很糟糕，因为有时更新前会有很大的延迟。检查这个松弛看看我的意思：https : //snack.expo.io/@divone/prepend-data-to-flatlist-on-web

有没有人成功地使用 React Native Web 实现类似 Chat 的 Flatlist？如果是，如何实现？

编辑：我发现在 react native web 上，当您预先添加数据IF AND ONLY IF滚动条不在屏幕顶部时，内容可见性会自动保持。（点心）

所以我的问题仍然存在......即使滚动条一直向上滚动，如何预先添加数据并保持可见性？

我刚开始玩redux-sagas,我收到一个奇怪的错误.我们使用React Native进行iOS,Android和Web开发,我得到的错误是特定于Web环境的.

在我们的代码中,我有./sagas/index.js这个:

function* mySaga() {
  console.log('my saga');
}

export default mySaga;

只要我在任何地方导入该文件(更不用说尝试调用该函数),我就会收到此错误:

Uncaught TypeError: Cannot read property 'mark' of undefined
    at Object../src/sagas/index.js (bundle.js:80385)
    at __webpack_require__ (bootstrap 029e2c2…:659)
    at fn (bootstrap 029e2c2…:85)

我认为它必须是我们的webpack中的东西所以我在这里包括:

const webpack = require('webpack');

const path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'build'),
    // enable HMR
    hot: true,
    // embed the webpack-dev-server runtime into the bundle
    inline: true,
    // serve index.html in place of 404 responses to allow HTML5 history
    historyApiFallback: true, …

我正在研究 Next.js 和 React-Native-Web。我设法按照官方 Next.js 示例将它们一起运行，但是当我尝试使用反应本机中的动画包时，它失败并出现错误，即 requestAnimationFrame未定义。基本上这个功能是使用node_modules包，但是我在webpack中设置了别名来将所有react-native需求转换为react-native-web，所以即使是node_modules包也应该使用react-native-web。

关于如何解决它有什么建议吗？

ReferenceError: requestAnimationFrame is not defined
    at start (...node_modules\react-native-web\
dist\cjs\vendor\react-native\Animated\animations\TimingAnimation.js:104:11)
enter code here

谢谢你的帮助！

我试图找到如何调试react-native-web应用程序（特别是使用Expo和vscode）。

我既没有在网络上也没有在react-native-web自己的网站上找到指导。

React Native Tools附带的调试配置旨在在 Expo 应用程序中运行，但我的目的是使用浏览器来调试/测试 React-Native-Web 行为。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug in Exponent",
            "request": "launch",
            "type": "reactnative",
            "cwd": "${workspaceFolder}",
            "platform": "exponent",
            "expoHostType": "local"
        }
    ]
}

当我尝试将 NextJS 与 react-native-web 和 styled-components 一起使用时，我经常碰壁。

问题似乎与样式组件中“react-native”的不正确别名有关。我不确定如何解决它。

我知道如何让它与 Razzle.js 一起工作，但我一生都无法弄清楚如何使用 NextJS 达到相同的工作状态。我怀疑它与 webpack 的 config.externals 有关 - 但它也可能是 babel.config.js 中的东西。

如果有人解决了这个问题，你将成为我今年最喜欢的人。我已经设置为 repo 重现问题

--- Next.js
pages/index.js - WORKS
pages/problem.js - FAILS (has styled-components/native)

--- Razzle
pages/Home.js - WORKS
pages/Home.js - WORKS (has styled-components/native)

https://github.com/Aleksion/rnw-styled-next https://github.com/Aleksion/rnw-styled-razzle

我\xe2\x80\x99m 正在处理一个小型博览会项目设置，我在其中为 iOS/Android 和 Web 进行开发。我最近想向项目添加样式组件，并让 Web 和移动设备的所有内容都启动并运行，直到我开始使用主题提供程序和主题道具。我 99% 确信我应该正确完成所有操作，因为它适用于移动设备，但我在 Web 版本中遇到 JS 异常。

\n
• 我\xe2\x80\x99 已经为主题创建了一个类型，我知道它有效，因为当我尝试向主题添加错误的内容时，我的 IDE 会告诉我。
\n
• I\xe2\x80\x99ve 创建了一个 theme.ts 并将其导入到 I\xe2\x80\x99ve 实现 ThemeProvider 的组件中。我知道这是有效的，因为当访问 prop.theme 时，我会自动完成，正如我所说，它适用于移动设备。
\n

const Container = styled.View`\n    background-color: ${props => props.theme.color.primary};\n`\n

这是我收到的错误：\n TypeError: 无法读取未定义的属性 \xe2\x80\x98primary\xe2\x80\x99

我怀疑这可能与 expo\xe2\x80\x99s 捆绑程序和缺少加载程序或其他东西有关？我不知道\xe2\x80\x99。据我所知，我按照文档中的说明进行了所有操作，并怀疑这是 Expo Web 和 ThemeProvider 的问题。

这些是我正在使用的相关软件包：

"expo": "~39.0.2"\n"styled-components": "^5.2.1"\n"@babel/core": "~7.9.0"\n

我被这个问题所困扰，因为我需要决定是否继续使用样式化组件或不使用它们。

如果我需要知道当前是否按下了诸如 Shift 键之类的键，我如何找到该信息？该解决方案应该将此信息分配给一个可以像这样调用的变量：

if(shiftHeld){
  //Do the thing.
}

我需要NextJS webpack 配置方面的帮助吗？

我有一个 mono-repo 并在React-Native和NextJS之间共享代码。为了拆分特定于操作系统的代码，我将本机代码和 Web 代码分开，如下所示：( Login.web.tsx& Login.native.tsx)

例子：/Login/index.tsx

import React, { lazy, ReactElement, Suspense } from 'react'
import { Platform, View } from 'react-native'

const LoginComponent = lazy(() => (Platform.OS === 'web' ? import('./Login.web') : import('./Login.native')))

const Login = (props: NavigationProp): ReactElement => {
  return (
    <Suspense fallback={<View />}>
      <LoginComponent {...props} />
    </Suspense>
  )
}

export default Login

此示例代码位于ui-screens项目中，并将被导入到唯一的 NextJS 页面中

import { Login } from '@monorepo/ui-screens' …

我正在使用 React Native Expo 构建一个混合应用程序。我的困难是我的应用程序需要地图并且需要在移动和网络上运行。为了使用 React Native 制作地图，我找到了几个库，但总是有一个问题：

• react-native-maps ：不支持网络。（https://github.com/react-native-maps/react-native-maps）
• @teovilla/react-native-web-maps ：使用 Webpack 配置，但我使用 Metro（以便能够使用 Expo Router）
• react-native-leaflet ：使用 Webview，因此不兼容 web
• MapBox SDK：不能与 Expo Go 一起使用（https://github.com/rnmapbox/maps/blob/main/plugin/install.md）

我尝试了所有这些库，但无法在网络中实现地图的渲染。

我的目标只是使用 Metro 在网络中使用 React Native Expo 的地图。也许我错过了一些东西，但我真的不知道如何显示地图。欢迎任何帮助。提前致谢。