标签: expo-web

我正在将我的 expo 应用程序转换为 react-native-web，我在显示Image时遇到了问题。默认情况下，react-native-web 使用position:absolute. 我想覆盖那个类，这是我的代码。

反应原生代码

<View>
    <Image
                style={{width: '80%', height: '35%',position: 'relative'}}
                source={require('../../assets/images/stn_logo.png')}
                alt="Logo" title="Logo" border="0"
              />
  </View>

从 chrome 元素转换的代码

<div class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010" style="height: 35%; position: relative; width: 80%;">
    <div class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw" style="background-image: url(&quot;/static/media/stn_logo.153bbaf1.png&quot;);"></div>
    <img alt="" draggable="false" src="/static/media/stn_logo.153bbaf1.png" class="css-accessibilityImage-9pa8cd">
</div>

在这里你可以看到 My React css 添加到 Parent div 但在img标签 react-native-web 上添加了一个 class css-accessibilityImage-9pa8cd，它的 CSS 在下面来自 chrome

    .css-accessibilityImage-9pa8cd { …

在 Expo 的最新版本中，有一个 Web 支持。在图片中，您会看到一个使用 React Native 创建并在 Web 中呈现的普通 TextInput。

如何更改在焦点上激活的 TextInput Border 的颜色？您会在 TextInput 周围看到橙色边框。你知道如何在 react-native 中改变这一点吗？

我正在尝试使用 vscode 调试本地 Expo Web 上运行的 React Native 代码。

我在以下位置尝试了这些配置launch.json：

    {
        "command": "npm start",
        "name": "Run npm start",
        "request": "launch",
        "type": "node-terminal"
    },
    {
        "name": "Attach to packager",
        "cwd": "${workspaceFolder}",
        "type": "reactnative",
        "request": "attach",
        "port": "19001",
    }

在这两种情况下，Expo 都会运行并且调试器会附加：

Debugger listening on ws://127.0.0.1:64192/13e8c77d-9c88-4909-9762-9b5bf8b70f90
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached

但断点要么不受限制，要么不起作用。

这是 package.json 中的脚本：

"scripts": {
  "start": "expo start",
  "android": "expo start --android",
  "ios": "expo start --ios",
  "web": "expo start --web",
  "eject": "expo eject"
},

你知道我缺少什么吗？

我有一个项目react-native-web，并且在其上配置了博览会。声明脚本具有范围内的导入@。我看到 Metro.config.js 对于那些 expo web 抱怨的导入有别名，这里是metro.config.js：

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const path = require("path")
const extraNodeModules = {
  "@modules": path.resolve(__dirname, "modules"),
  "@screens": path.resolve(__dirname, "screens"),
  "@options": path.resolve(__dirname, "options")
}
const watchFolders = [
  path.resolve(__dirname, "modules"),
  path.resolve(__dirname, "screens"),
  path.resolve(__dirname, "options")
]
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  },
  resolver: {
    extraNodeModules: new Proxy(extraNodeModules, {
      get: …

运行npm start或expo start启动项目如下：

React  You can now view My React Native App in the browser.\n\n  Local:            http://localhost:19006/   On Your Network:  http://157.201.29.49:19006/\n\nNote that the development build is not optimized.\n\n \xe2\x80\xba To create a production build, run expo build:web  \xe2\x80\xba Press Ctrl+C to exit.\n\n Expo  Press ? to show a list of all available commands.\n

通过按 \xe2\x80\x98w\xe2\x80\x99 启动 Expo 网络将打开 Chrome 浏览器，其中包含http://157.201.29.49:19006/建议的 IP 地址 URI。

但由于办公室VPN的原因，Chrome浏览器无法解析该地址。错误是：

\n

无法访问此站点\xe2\x80\x99
\n ERR_CONNECTION_TIMED_OUT

\n

在我的 Mac 上，我安装了 Chrome、Firefox 和 Safari。Safari 被设置为默认系统浏览器。

使用启动世博会网络；

expo start -w

作品。但是，它在 Chrome 而不是 Safari 中启动 URI。如果我删除 Chrome 浏览器，expo 将在 Safari 中启动。但是我想继续安装多个浏览器。

如何覆盖此设置以便我可以选择 Safari？

我正在使用 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 的地图。也许我错过了一些东西，但我真的不知道如何显示地图。欢迎任何帮助。提前致谢。