标签: react-native-web

React Native Web 中缺乏 Modal 促使我构建一个覆盖在当前视图之上的弹出组件。

我尝试过使用“绝对”位置、顶部：0 和左侧：0 黑客。这工作得很好，但如果在子组件中使用它，它将无法正常工作，因为自动 zIndex 按组件的顺序排列。下图说明了这个问题（请参阅蓝色按钮阻止下拉菜单弹出）：

最终我发现 React 可以直接在根处渲染组件（通过此链接了解更多信息），这意味着该组件将渲染在其他组件之上，但这是针对 React 而不是 React Native。

我想知道 React Native 中是否有类似的东西。

我刚刚更新到最新的 expo sdk 33，所以我可以使用 expo web 功能。该项目似乎正在运行，我可以导航到不同的屏幕，但我可以在任何屏幕上滚动。有没有人知道我可能做错了什么或遗漏了什么？

Expo-cli 版本是：'2.19.5'

我正在使用纱线

包.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/vector-icons": "latest",
    "expo": "next",
    "expo-cli": "^2.19.5",
    "expo-codemod": "^1.0.0",
    "expo-constants": "latest",
    "expo-image-manipulator": "latest",
    "expo-image-picker": "latest",
    "expo-intent-launcher": "latest",
    "expo-permissions": "latest",
    "firebase": "^5.8.1",
    "native-base": "^2.12.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-firebaseui": "^3.1.2",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-alert-async": "^1.0.3",
    "react-native-modal": "^9.0.0",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-picker-select": "^5.2.3",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.5.0-alpha.0",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": …

在 react-native-web 中创建自定义组件时，我想访问我的 View 组件的底层 DOM 节点以添加/删除 eventListener。

class MyButton extends React.Component {    
  render() {
    return (
      <View ref={component => this._root = component}>
        <Text>{this.props.label}</Text>
      </View>
    )
  }
}

我想像这样添加一个事件监听器：

this._root.dontknowthis.addEventListener('sn:focused', this._componentFocused);

作为替代解决方案，我尝试直接渲染一个组件，然后附加 eventListener：

    <div
      ref={e => (this.el = e)}
      tabIndex="-1"
    >
      <WrappedComponent {...this.props} />
    </div>

在这种情况下，我可以附加一个 eventListener：

this.el.addEventListener('sn:focused', this._componentFocused);

这有效，但我也想在这个组件上设置一个样式，最好是通过 props 传递的样式。这似乎不起作用，因为 react-native 样式与 DOM 节点样式不同。

那么这里最好的解决方案是什么？继续使用 div 组件并以某种方式重新格式化样式，还是使用 View 并以某种方式访问​​底层 DOM 节点以附加侦听器？

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

但是，我坚持使用文件上传功能，因为要使用 React Native 组件，我们需要执行本机权限（但我们不是在本机部署它，因此浏览器中没有这样的东西）。但同时，我无法使用简单的，<input type=“file” />因为 UI 是建立在 react 本机特定的标签上的（例如<View>/<Image>等）

这个问题有方法解决吗？

So I am trying to run react-native using react-native-web. It requires some babel plugins to be added.

My app was created using react-app-rewired. I have tried several ways to add the babel plugin, however, with no success.

I am using a config-overrides.js file that looks like this:

const { override, addBabelPlugins, addDecoratorsLegacy, fixBabelImports } = require('customize-cra');

const addHandleBarsLoader = config => {
    // add handlebars-loader so that handlebars templates in
    // webpack-dev-server's served html files are parsed
    // (specifically the …

我正在使用这个https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html从任何来源访问我的导航，我的文件如下所示：

import { createRef } from 'react';

export const navigationRef = createRef();

export function navigate(name, params) {
  return navigationRef.current?.navigate(name, params);
}

export function goBack() {
  return navigationRef.current?.goBack();
}

export function getRootState() {
  return navigationRef.current?.getRootState();
}

这非常适合我的@navigation/drawer，它在我的堆栈导航之外。

只有最后一个方法不同步的一个问题，我希望在我的项目菜单上有一个活动状态，即当前路线。

反应导航5怎么可能？

我有一个 React Native Web 项目。有一次，我希望我的View而不是生成 a<div>来生成一个<label>元素。

有没有办法控制这个？htmlTag如果这不是为浏览器环境编译，我希望某种属性会被忽略。

我正在运行React Native Storybook，它在 Native 模拟器中运行 Storybook。

除了目前 React Native Storybook 的工作方式之外，我还想为 Web 构建一个它的实例，作为我们应用程序的参考伴侣。

我正在使用"@storybook/react-native": "5.3.14". 我的故事位于./storybook.

我在做：

import React from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Linking } from 'react-native';

/**
 * Used to create external link to other websites
 */
class ExternalLink extends React.Component {
  _openLink = async () => {
    const { href } = this.props;
    if (await Linking.canOpenURL(href)) {
      await Linking.openURL(href);
    }
  };

  render() {
    const { href, children, ...rest } = this.props;
    return (
      <TouchableOpacity
        accessibilityRole="link"
        onPress={this._openLink} // eslint-disable-line no-underscore-dangle
        href={href}
        {...rest}
      >
        {children}
      </TouchableOpacity>
    );
  }
}

ExternalLink.propTypes = …

在 Expo 网络项目中是否有推荐的代码拆分方法？

我在文档中找不到任何内容，即使在网页性能页面上：https : //docs.expo.io/guides/web-performance/

我很惊讶，因为这是很多（可能是大多数）网络应用程序想要做的事情。如果它不受官方支持，是否有解决方法？