如何將react-nativeweb集成到現有的reactnative專案中-有解無憂

typescript我們有一個使用, react-navigation, react-native-gesture-handler,redux/toolkit作為主要包實作的 react-native 專案

最近我們將 react-native-web 集成到我們的專案中，但它運行不正確。

我們的專案有幾個問題：

匯入自定義模塊時無法加載它們。例如：

import MyCustomComponent from './components/MyCustomComponent'

<View style={{flex: 1, backgroundColor: 'green'}}>
  <MyCustomComponent/>     <--- does not show up, event when it contains a simple View component, we will see a blank screen
</View>

但是當我MyCustomComponent在當前檔案中定義時，它顯示沒有問題：

function MyCustomComponent() {
   return(
     <View style={{flex:1, backgroundColor: 'yellow'}}></View>
   )
}

export default function MyMainComponent() {
     return (
        <View style={{flex:1, backgroundColor: 'green'}}>
           <MyCustomComponent/>      <---- this shows up
        </View>
     )
}

任何進入 redux 的東西Provider都不會再出現了。

我認為我們的webpack配置是錯誤的，但由于我不是 Web 開發專家，我需要一些幫助來找出問題所在。這是我們的 webpack 配置：

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 = [
  // Add every react-native package that needs compiling
  'react-native-gesture-handler',
  'react-redux',
  'react-native-reanimated',
  'react-native-confirmation-code-field',
  'react-native-calendars',
  '@react-native-google-signin/google-signin',
  'react-native-compressor',
  'react-native-swipe-gestures',
  '@react-native-async-storage',
  'react-native-shared-element',
  '@react-navigation',
  'react-native-material-menu',
  '@reduxjs/toolkit',
  'react-navigation-shared-element',
  'react-native-collapsible-tab-view',
  'react-native-image-crop-picker',
  '@react-native-community',
  'react-nativbe-safe-area-context/lib',
  'react-native-screens',
].map(moduleName =>
  path.resolve(appDirectory, `../node_modules/${moduleName}`),
);

const babelLoaderConfiguration = {
  test: /\.js$|tsx?$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, '../index.web.js'), // Entry to your application
    path.resolve(__dirname, '../src/index.web.tsx'), // Change this to your main App file
    path.resolve(__dirname, '../src'),
    ...compileNodeModules,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets,
      plugins: ['react-native-web'],
    },
  },
};

const svgLoaderConfiguration = {
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
    },
  ],
};

const tsLoaderConfiguration = {
  test: /\.(ts|tsx|web.ts|web.tsx)?$/,
  use: [
    {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  ],
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

module.exports = {
  entry: {
    app: path.join(__dirname, '../index.web.js'),
  },
  output: {
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '/',
    filename: 'arcelor.bundle.js',
  },
  resolve: {
    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
    alias: {
      'react-native$': 'react-native-web',
    },
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      svgLoaderConfiguration,
      tsLoaderConfiguration,
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
      filename: 'index.html',
      inject: 'body',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      // See: https://github.com/necolas/react-native-web/issues/349
      // __DEV__: JSON.stringify(true),
      __DEV__: process.env.NODE_ENV !== 'production',
      process: {env: {}},
    }),
  ],
};

我正在使用 webpack@^5.65.0

誰能幫我弄清楚問題出在哪里，我該如何react-native-web處理我們的專案？謝謝

uj5u.com熱心網友回復：

從頭開始啟動和運行 Webpack 并不是一件容易的事。我建議您從準備使用的方法開始，例如cra或expo。然后按照自己的方式進行定制。

創建反應應用程式

首先，安裝依賴項：

yarn add react-native-web react-scripts react-dom

在其中創建一個 HTML 檔案public/index.html并將以下內容放入其中：gh:facebook/create-react-app/cra-template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Your App Title</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

將index.js專案根目錄重命名為index.native.js. 看
在其中創建一個js檔案，src/index.js并在其中放入以下內容：

import { AppRegistry } from "react-native";
import { App } from "./App";

AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication("App", {
  rootTag: document.getElementById("root"),
});

通過運行運行應用程式 react-scripts start

定制

您可能需要將前處理器集成react-native-reanimated/plugin到您的 babel 配置中，或者編輯您的 WebPack 以添加全域變數，例如process.env. 為此，您可以使用react-scripts eject訪問所述配置或使用custom-cra等工具。

世博會（推薦）

在我看來，世博會是最好的方式。世博會基本上是create-react-app為了react-native支持react-native-web.

您可以按照官方指南為您的專案設定網路博覽會。

安裝依賴：

yarn add --global expo-cli
expo install react-native-web react-dom
yarn add expo

將您的根目錄修改index.js為以下內容：

import { registerRootComponent } from 'expo';

import App from './App';

registerRootComponent(App);

在這一點上，你準備好了。只是生銹expo start:web。

定制

通過運行expo customize:web，您可以訪問 Babel 和 Webpack 組態檔。

打字稿 `basePath`

如果你"baseUrl": "src"在你的tsconfig.json. 您可能還需要設定 Babel。因為它可能不一定遵循您的 tsconfig。

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
      [
        'module-resolver',
        {
          root: ['src'],
          extensions: ['.tsx', 'json', '.ts', '.js'],
        },
      ],
    ],
  };
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/416556.html

標籤：

上一篇：Vuetifytreeshaking不適用于webpack

下一篇：如何使用正則運算式從多行資料中獲取必要的資訊？

如何將react-nativeweb集成到現有的reactnative專案中

創建反應應用程式

定制

世博會（推薦）

定制

打字稿 basePath

打字稿 `basePath`