标签: react-native-web

需要react-navigation从手机重用代码react-native-web。但是我无法在网络上运行它。

我们是否需要react-router单独使用网络？

我们如何为两个平台共同配置导航？我希望看到一个例子！这将超级有帮助。谢谢！！

当我尝试在 Web 模式下运行应用程序时，我收到了下面提到的错误。

/node_modules/expo/build/Notifications/Notifications.js
Module not found: Can't resolve 'react-native-web/dist/exports/AsyncStorage' in '/Users/i322865/node_modules/expo/build/Notifications'

我正在使用最新的博览会（0.36，我在使用 0.35 版本时也遇到了同样的错误）并响应本机 web 0.12.0-rc.1。请帮助解决此问题，如果您需要更多详细信息，请告诉我。

在本机反应中，我有：

Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`.

我有一个postalCode，它是数值。

我已经设置了keyboardType="numeric"，<TextInput />但我在 ios/android/web 上仍然有这个错误。

我该如何解决？

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

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

我已经在 React Native 中为 iOS 和 Android 构建了一个应用程序，但我也想通过网络应用程序提供。一切都很好，但网络应用程序的性能是一个问题。

文件大小构建为 2.02MB。有没有办法在不影响我的本机构建的情况下优化它？

asset size limit: The following asset(s) exceed the recommended size limit (586 KiB).
This can impact web performance.
Assets:
 ./fonts/MaterialCommunityIcons.ttf (665 KiB)
 static/js/2.4f7a5c.chunk.js (2.02 MiB)

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (586 KiB). This can impact web performance.
Entrypoints:
 app (2.11 MiB)
     static/js/runtime~app.4b5a04.js
     static/js/2.8f75c.chunk.js
     static/js/app.59c50.chunk.js

许多人似乎都经历过这个问题的某个版本，但之前的解决方案似乎都不适合我。我的应用程序是使用 CRA 和 React Native Web 构建的。我正在测试基于 React Native 的 View 的组件的点击行为。我尝试从“@testing-library/react-native”导入 { fireEvent }，因为来自 @testing-library/react 的 fireEvent 不起作用，但它会抛出此错误：ReferenceError：DEV未定义

包.json

{
  "name": "writual",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@n8tb1t/use-scroll-position": "^1.0.43",
    "@react-mock/localstorage": "^0.1.2",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-pdf/renderer": "^1.6.8",
    "aphrodite": "^2.4.0",
    "babelify": "^10.0.0",
    "blob-stream": "^0.1.3",
    "browserify": "^16.5.0",
    "draft-js": "^0.11.4",
    "draft-js-plugins-editor": "^3.0.0",
    "draft-js-static-toolbar-plugin": "^3.0.1",
    "expo": "^36.0.2",
    "expo-cli": "^3.11.9",
    "firebase": "^7.9.1",
    "g": "^2.0.1",
    "lodash.debounce": "^4.0.8",
    "mutationobserver-shim": "^0.3.7",
    "pdfkit": "^0.10.0",
    "react": "^16.13.1",
    "react-art": "^16.12.0",
    "react-dom": …

我正在将 ReactNative 移动应用程序改编为 ReactNative Web。该应用程序完成了react-navigation。

目前，每次我设置路由的参数（通过navigate或setParams）时，这些参数都会显示在 URL 中。我最终得到的网址看起来很糟糕，如下所示： http://localhost:19006/me/undefined?user=%5Bobject%20Object%5D

或者 URL 包含与用户无关的数据，并且通常看起来很混乱。

有没有办法不显示 URL 中的路由参数？

我有一个图像组件，用于将图像加载到我的应用程序的标头中。我可以为图像应该在的位置创建边框，但无法正确加载图像。这是我加载图像的代码

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet, Button, Image } from 'react-native';

class BackButton extends React.Component {
  
    render() {
        return (
            <Image source={require('./assets/images/arrow.png')} style={styles.image} />
        );
    }
}

var styles = StyleSheet.create({
    image: {
      width: '24px',
      height: '24px',
      borderWidth: 1
    }
  });

export default BackButton;

这是调用该组件的地方

import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import AppText from './assets/text/AppText'
import AppTextHeader from './assets/text/AppTextHeader'
import BackButton from './BackButton'

const Header = ({ onBack, title }) => ( …

我正在尝试使用 React-Native Web 将现有的 React Native 应用程序转换为 Web 应用程序。该应用程序现在已成功编译，但页面显示为空白，并且在检查控制台时出现以下错误。

当我们不使用项目文件并使用反应本机元素（如等）制作一个简单的屏幕时，它工作正常View。Text

rnw_blogpost.bundle.js:31234 Uncaught ReferenceError: exports is not defined
    at eval (extends.js:2)
    at Module../node_modules/react-redux/node_modules/@babel/runtime/helpers/esm/extends.js (rnw_blogpost.bundle.js:30586)
    at __webpack_require__ (rnw_blogpost.bundle.js:31231)
    at fn (rnw_blogpost.bundle.js:31457)
    at eval (connectAdvanced.js:1)
    at Object../node_modules/react-redux/es/components/connectAdvanced.js (rnw_blogpost.bundle.js:17465)
    at __webpack_require__ (rnw_blogpost.bundle.js:31231)
    at fn (rnw_blogpost.bundle.js:31457)
    at eval (index.js:1)
    at Object../node_modules/react-redux/es/index.js (rnw_blogpost.bundle.js:17585)

这是我的 webpack.config.js

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const appDirectory = path.resolve(__dirname);
const {
  presets
} = require(`${appDirectory}/babel.config.js`);

const compileNodeModules = [
  // Node …

我在我的 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", …