标签: react-native-web

有没有在React-Native-Web中播放视频的解决方案

React-Native-Web：https ://github.com/necolas/react-native-web

React-Native-视频：https://github.com/react-native-community/react-native-video

我已经使用 Redux 实现了一个RecyclerListView（Flipkart Github），如下所示。一切似乎都工作得很好，除了当onEndReached被调用并且一批新数据通过时，列表被定位到页面顶部而不是保持平滑。请参阅下面的 GIF 中的行为：

注意：这发生在网络（chrome）上。我尝试了最新的稳定版和2.0.13-alpha.1

import React, { useCallback } from 'react';
import { View, Text, Dimensions } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { RecyclerListView, DataProvider, LayoutProvider } from 'recyclerlistview/web';
import { createSelector } from 'reselect';

import { loadData } from '../actions';

const selectData = createSelector(
  state => state.data,
  data => Object.values(data),
);

let containerCount = 0;
class CellContainer extends React.Component {
  constructor(args) {
    super(args);
    this._containerId = …

我正在使用带有样式组件的 React Native Web 和 React Native Paper 库。基本上我想自定义 TextInput 内部组件：标签和html 输入

问题是：

1）如何更改标签样式？例如。宽度\尺寸\颜色等？
2）如何更改html输入样式？

我想设置outline: none为防止在浏览器中焦点上显示蓝色边框。据我所知，在本机的情况下，我们没有，html并且本机网络会对其进行转译。

我不明白如何捕获嵌套标签组件来更改其样式。因为我想在未填充时显示灰色标签，在填充时显示紫色，并且输入文本应为黑色。对于网络来说，这是微不足道的，但对于本机来说，我不知道如何处理它。

那么这有可能吗？

谢谢你的帮助。这是代码示例

import React from 'react';

import {
  View,
  Platform,
} from 'react-native';

import {
  TextInput as NativePaperInput,
  withTheme,
} from 'react-native-paper';

import styled from 'styled-components/native';

const NativePaperInputThemed = withTheme(NativePaperInput);

export const TextInputStyled = styled(NativePaperInputThemed)`
    ${(props: any) => {
      return `
        outline: none;  // doesn't work
        input: { …

如果你想在 RN 和 RN-web 之间共享代码，__DEV__也应该在两个平台中提供。

但是我无法使用添加DEVconst __DEV__ = process.env.NODE_ENV !== 'production'; new webpack.DefinePlugin({__DEV__})

我可以设置window.__DEV__好，但是 RN 代码使用__DEV__

我也尝试过添加module:metro-react-native-babel-preset

我见过React Native - __DEV__ 未定义

/* global __DEV__ */有效，但希望有一种方法可以修复它，而无需修改所有使用的源__DEV__

我也正在尝试将 React Native 应用程序转变为 React Native Web 应用程序。

我想做以下类型的导入：

if (Platform.OS !== 'web') {
    import { Route, Link, Switch, push, DeepLinking } from "react-router-native";
}

但是我收到错误：

Syntax error: 'import' and 'export' may only appear at the top level (16:4)

现在我尝试在 package.json 中添加 ESLint 配置来防止出现这种情况：

  "eslintConfig": {
    "parser": "babel-eslint",
    "parserOptions": {
      "sourceType": "module",
      "allowImportExportEverywhere": true
    }
  }

但它仍然在发生。

如何允许动态导入？

我想监听一个 webapp 内部触发的点击事件，这个 webapp 在react-native webview中加载。因此需要监听点击事件，然后在react-native中运行异步函数。

我的用例是单击保存按钮后下载文件（此保存按钮位于网络应用程序内）。

handleNavigationStateChange但和内部没有任何内容被触发或监听onMessage。请找到下面的代码。

  render() {
    const url = 'https://www.takeselfie.com/#';
    return (
      <WebView
      useWebKit
      originWhitelist={['*']}
      allowsInlineMediaPlayback
        bounces={true}
        source={{
          uri: url,
        }}
        startInLoadingState={true}
        scalesPageToFit
        javaScriptEnabledAndroid={true}
        javaScriptEnabled={true}
        injectedJavaScript={`document.body.addEventListener('click', function(e){
          window.postMessage("Message from WebView","*");
            console.log(e)
        })`}
        onMessage={e => console.log("message==", e)}
         mixedContentMode={'always'}
        allowUniversalAccessFromFileURLs={true}
        onNavigationStateChange={this.handleNavigationStateChange}
        style={{ flex: 1 }}
      />
    );
  }

expo build:web 生成的包大小非常大，平均为 3mb。

我完成了https://docs.expo.io/guides/web-performance/上的步骤。我的应用程序没有图像，因此优化它们没有真正的问题。其他建议的改进变化很小。

我使用了捆绑包分析器，并且没有安装任何大尺寸的模块来导致 3mb 捆绑包大小。

当我运行构建时，我得到：

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (48.8 KiB). This can impact web performance.\nEntrypoints:\n  app (3.2 MiB)\n      static/js/runtime~app.aaee9ccd.js\n      static/js/2.a5f54fa3.chunk.js\n      static/js/app.98ae2f23.chunk.js\n

其结果是网页的性能极差。

如果我在浏览器中的构建结果上运行 google \xe2\x80\x9clightspeed\xe2\x80\x9d (pagespeed Insights)，我会得到非常差的初始页面加载评级。

我正在考虑一种可能的解决方法，即分支，然后 expo 弹出，然后删除所有不必要的 npm 模块以减少包大小。

我\xe2\x80\x99ve还在一些组件上添加了延迟加载，但没有太大改进。

您还有其他建议吗？

还附上谷歌光速测试结果。

\n

我正在开发一个博览会项目，我想为网络版本添加推送通知功能（使用React Native Web构建）。我特别讨论的是实现推送通知，这些通知可以发送给仅在浏览器中使用该项目的用户，无论是移动设备、桌面设备还是介于两者之间的任何设备。

我找不到任何有关使用 Service Worker 或使用 React Native Web 或 Expo 实现 Web 推送通知的信息。

有没有办法只为我的项目的 RN Web 版本实现网络推送功能（最好与 Expo 推送通知一起实现，这将用于本机版本）？

我正在尝试在 ReactJs 和 React Native 项目之间共享组件。我已经成功地能够共享使用 React Native 的组件，但是使用 Native Base 的项目出现错误。我的设置是这样的：

我有一个包含该项目的单一存储库。我在我的 Web 项目中安装了 React Native Web，我在 React Native 代码库中创建了一个共享文件夹。我从我的 web src 文件夹到共享文件夹创建了一个符号链接我更新了 babel 配置以编译共享文件夹中的项目

这是我试图分享的一个组件的示例。没什么特别的；）

import {Center, Text} from 'native-base';

const Test = () => {
  return (
    <Center>
      <Text>hello world!</Text>
    </Center>
  );
};

export default Test;

我在 devtools 控制台中看到了这一点：

未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本

上述错误发生在<ForwardRef(Center)>组件中：

知道如何让具有本机基础的组件在网络中工作吗？我应该指出，它在没有符号链接的移动设备上运行良好。

我在我的 expo 应用程序（Google Auth）中使用 firebase Auth，为了做到这一点，我需要在 .env 文件中设置我的 firebase 变量（我的 API_KEYS、AuthDomain ...）。我使用 expo 常量来获取这些环境变量并在我的 firebase.ts 文件中使用它们，实现后它可以在移动和网络上运行。今天我注意到它不再在网络上工作，因为constants.manifest对象是空的，我不明白为什么。

firebase.ts：

import { initializeApp } from "firebase/app";
import "firebase/auth";
import Constants from "expo-constants";

// Initialize Firebase

console.log("=======>", Constants);

const firebaseConfig = {
  apiKey: Constants.manifest?.extra?.apiKey,
  authDomain: Constants.manifest?.extra?.authDomain,
  projectId: Constants.manifest?.extra?.projectId,
  storageBucket: Constants.manifest?.extra?.storageBucket,
  messagingSenderId: Constants.manifest?.extra?.messagingSenderId,
  appId: Constants.manifest?.extra?.appId,
};

const Firebase = initializeApp(firebaseConfig);

export default Firebase;

应用程序.config.js：

import "dotenv/config";

export default {
    expo: {
        entryPoint: "./src/App.tsx",
        name: "Flooz",
        slug: "flooz",
        version: "1.0.0",
        orientation: "portrait",
        icon: "./src/assets/images/icon.png",
        scheme: "flooz", …