标签: react-native-web

反应本机版本：0.57.3

Android：Google Pixel 3 API - 28

iOS：iPhone 8 plus - 11.4

反应本机网络：0.10.0

我正在尝试运行我的react-native-web 应用程序，该应用程序在网络上运行良好。在尝试解决移动端的 babel 插件问题后，我遇到了这个问题。我已经使用 babel-upgrade 进行自动 babel 升级。我在这里发布我的 package.json 和 babelrc 。

包.json：

"devDependencies": {
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "babel-eslint": "^9.0.0",
        "babel-jest": "^23.4.2",
        "babel-loader": "8.0.0-beta.0",
        "babel-plugin-module-resolver": "3.2.0",
        "babel-plugin-react-native-web": "0.8.4",
        "babel-preset-react-native": "5.0.2",
        "jest": "23.2.0",
        "metro": "^0.52.0",
        "metro-core": "^0.52.0"
    },
    "dependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-proposal-decorators": "^7.0.0",
        "@babel/plugin-proposal-do-expressions": "^7.0.0",
        "@babel/plugin-proposal-export-default-from": "^7.0.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
        "@babel/plugin-proposal-function-bind": "^7.0.0",
        "@babel/plugin-proposal-function-sent": "^7.0.0",
        "@babel/plugin-proposal-json-strings": "^7.0.0",
        "@babel/plugin-proposal-logical-assignment-operators": …

Run Code Online (Sandbox Code Playgroud)

我按照本教程添加到react-native-web项目中react-native。但我在添加react-native-vector-icons到项目时遇到错误。

./node_modules/react-native-vector-icons/lib/create-icon-set.js
SyntaxError: /home/hamidreza/Desktop/myApp/node_modules/react-native-vector-icons/lib/create-icon-set.js: Support for the experimental syntax 'classProperties' isn't currently enabled (43:22):

  41 | 
  42 |   class Icon extends PureComponent {
> 43 |     static propTypes = {
     |                      ^
  44 |       allowFontScaling: PropTypes.bool,
  45 |       name: IconNamePropType,
  46 |       size: PropTypes.number,

我也将我的更改babel.config.js为：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true,
      },
    ],
  ],
};

或者

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-class-properties' …

我正在尝试使用 React Native 为 Web 应用程序配置 React-navigation。为此，我在 NavigationContainer 上设置了链接选项，以便我可以使用以下代码从浏览器 URL 访问我的页面：

const linking = {
  prefixes: ['http://localhost:8080/', 'http://localhost:8080', 'localhost:8080'],
  // prefixes: [prefix],
  config: {
    screens: {
      SignIn: "SignIn",
      SignUp: "SignUp",
      Landing: '*',
    },
  }
};

function AppContainer() {

  return ( 
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <AppStack.Navigator>
        <AppStack.Screen name="SignIn" component={SignInPage}/>
        <AppStack.Screen name="Landing" component={LandingPage}/>
        <AppStack.Screen name="SignUp" component={SignUpPage}/>
        <AppStack.Screen name="Home" component={HomePage}/>
      </AppStack.Navigator>
    </NavigationContainer>
  );
}

当我转到“http://localhost:8080/”时，我被重定向到“http://localhost:8080/SignIn”（这很好），并且应用程序正在运行。问题是，如果我从浏览器访问“http://localhost:8080/SignIn”，我会收到“Cannot GET /SignIn”，并且该应用程序无法正常工作...

我正在使用这些版本：

"@react-navigation/bottom-tabs": "^5.11.1",
"@react-navigation/native": "^5.8.9",
"@react-navigation/stack": "^5.12.5",

我正在尝试为托管的expo项目工作的“ web博览会”部分。

我将托管的expo项目升级到了expo sdk 33，以便我也可以在Web平台上部署我的应用程序，并且理想情况下可以将其从Firebase托管。我遵循了博览会的官方指示：

升级Expo SDK演练

Expo CLI和SDK Web支持Beta

在Expo init项目中使用Expo for Web

有关如何升级到SDK 33以及如何配置和启用Web平台的信息。

Expo-cli版本为：“ 2.19.5”

我正在使用纱线

package.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", …

大家好，这是我第一次在这里问问题，但我真的没有想法了......

未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用

对于在 React-native web 上运行的 React-native 项目，我想使用useEffect()钩子在我的组件中运行一个 init 函数。为了从我导入的本地库中获取数据yarn link（该库不使用 react）。

正如你所看到的，我的钩子在一个功能组件中：

import React, { useEffect } from 'react';

import Premium from './Premium';

const Widget = () => {

  useEffect(() => {
    init();
  }, []);

  const init = async () => {
    console.log('working');
  };

  return (
    <Premium />
  );
};

export default Widget;

我还检查我的版本的反应，因为它说反应-DOM这里，我只得到了一个副本的反应/反应-DOM和反应母语。

可以肯定的是，我已经按照官方文档中的说明以两种不同的方式进行了检查。（通过npm ls …

根据文档

React Native 可以使用 React 创建适用于 Android 和 iOS 的本机应用程序。

但我对 React Native Web 感到困惑。根据github 主页

“React Native for Web”使得使用 React DOM 在 Web 上运行 React Native 组件和 API 成为可能。

我不明白！

这是 React Native 官方支持的库，用于编译 React Native 移动应用程序，作为 Web 应用程序从相同的代码库在 Web 上运行，就像我们在 Flutter 中所做的那样？

这是在我意识到 onStart() 没有被调用之前

使用 PanGestureHandler 并尝试“拖动”AnimatedView 在网络上不起作用。没有明显的错误，应用程序构建得很好，检查时控制台中没有警告。

有一个警告让我相信这可能是问题的根源。我在控制台中收到一条警告，内容如下：

"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".

我使用带有 containerStyle 样式的 AnimatedView 来转换对象并在拖动时移动它。

问题的根源

所以我一直在进一步研究它，尝试调试它，我开始意识到回调onStart()没有被调用。由于onStart()未调用回调，因此上下文值永远不会最终被设置，并且上下文对象总体保持为空。导致我最初的问题是无法拖动对象。

不过，这在 iOS 上仍然有效。由于某种原因，在 iOS 上onStart()会调用回调。这会导致上下文被填充并起作用。

这是到目前为止我的代码，请记住这只是一个组件。在根目录中，我确实有一个包含整个应用程序的 GestureHandlerRootView 组件。

import { View, Image } from 'react-native';
import Animated, {
    useAnimatedStyle,
    useSharedValue,
    useAnimatedGestureHandler,
    withSpring,
} from 'react-native-reanimated';
import { PanGestureHandler, TapGestureHandler } from 'react-native-gesture-handler';

const AnimatedImage = Animated.createAnimatedComponent(Image);
const AnimatedView = Animated.createAnimatedComponent(View);

export default function EmojiSticker ({ imageSize, …

我正在使用react-native-document-picker表单，使用以下代码从Android手机中选择文件

DocumentPicker.show({
  filetype: [DocumentPickerUtil.images()],
},(error,res) => {
  // Android
  console.log(
     res.uri,
     res.type, // mime type
     res.fileName,
     res.fileSize
  );
});

上面日志的输出就像

uri: 'content://com.android.providers.media.documents/document/image%3A48',
type: 'image/jpeg'
fileName: 'TestImage.jpeg'
fileSize: 5301

如何在 React Native 中获取上传文件的字节数组并将其作为 Web api post 请求的输入发送。