React Native for Web配置

React Native for Web配置

兼容性：React Native 0.55。

「React Native for Web」使得可使用React DOM在Web上運行React Native組件和API。查看在Web上運行的React Native示例的實時演示。

• 高質量的Web界面：能夠輕鬆地在JavaScript中建立fast，自適應的Web UI。它提供原生質量的交互，支持多種輸入模式（觸摸，鼠標，鍵盤），優化的供應商前綴樣式，內置支持RTL佈局，內置可訪問性，並與React Dev Tools集成。

• 編寫一次，隨處渲染：與現有的React DOM組件互操做，並與大多數React Native API兼容。您能夠爲本機和Web開發新組件，而無需重寫現有代碼。React Native for Web也可使用Node.js渲染到服務器上的HTML和關鍵CSS。

瀏覽器支持：Chrome，Firefox，Edge，Safari 7 +，IE 10+。

快速開始

最簡單的入門方法是編輯此 CodeSandbox模板（或 Glitch）。你不須要安裝任何東西來試試。

有關安裝和配置的詳細信息，請閱讀入門 指南。

文檔

有關總體API，設計詳細信息以及有關手勢響應程序系統 和動畫的信息，請參閱React Native文檔。

某些組件和API經過Web的其餘功能進行了擴展。在少數狀況下，網絡上缺乏Android或iOS的功能。這些差別記錄在網站上。

指南

這些指南詳細介紹瞭如何使用React Native建立可訪問的Web體驗。某些特定於Web的模式記錄在「Web配方」指南中。

• Getting started
• Client-side rendering
• Server-side rendering
• Style
• Accessibility
• Internationalization
• Direct manipulation
• Web recipes
• Multi-platform apps
• Experimental / unstable use

入門 Webpack，看這篇就夠了

.babelrc 

{
  "presets": [
    "@babel/preset-env",
 "@babel/preset-react",
 "react-native"
 ],
 "plugins": [
    ["module-resolver", {
      "alias": {
        "^react-native$": "react-native-web"
 }
    }]
  ]
}

 

package.json 

{
  "name": "rnweb",
 "version": "0.0.1",
 "private": true,
 "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
 "ios": "react-native run-ios",
 "android": "react-native run-android",
 "webdev": "./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors",
 "webprod": "./node_modules/.bin/webpack -p --config ./web/webpack.config.js",
 "test": "jest"
 },
 "dependencies": {
    "@babel/runtime": "^7.4.4",
 "react": "^16.8.6",
 "react-dom": "^16.8.6",
 "react-native": "0.59.8",
 "react-native-web": "^0.11.2"
 },
 "devDependencies": {
    "@babel/cli": "^7.4.4",
 "@babel/core": "^7.4.4",
 "@babel/plugin-transform-runtime": "^7.4.4",
 "@babel/preset-env": "^7.4.4",
 "@babel/preset-react": "^7.0.0",
 "babel-jest": "^24.8.0",
 "babel-loader": "^8.0.6",
 "babel-plugin-module-resolver": "^3.2.0",
 "babel-plugin-react-native-web": "^0.11.2",
 "babel-preset-react-native": "^5.0.2",
 "jest": "^24.8.0",
 "make-dir-cli": "^2.0.0",
 "react-test-renderer": "16.8.3",
 "source-map-loader": "^0.2.4",
 "url-loader": "^1.1.2",
 "webpack": "^4.31.0",
 "webpack-cli": "^3.3.2",
 "webpack-dev-server": "^3.3.1"
 },
 "jest": {
    "preset": "react-native"
 }
}

pasting

 

web/webpack.config.js

/**
 * @Name webpack.config.js
 * @Description react-native-web webpack打包配置文件
 */
const path = require('path');
const webpack = require('webpack');

/** __dirname是node.js中的一個全局變量，它指向當前執行腳本所在的目錄 */
const appDirectory = path.resolve(__dirname, '../');

/**
 * Babel實際上是一個編譯JavaScript的平臺
 * 一、使用最新的JavaScript代碼（ES6，ES7...）而不用管新標準是否被當前使用的瀏覽器徹底支持
 * 二、使用基於JavaScript進行了拓展的語言，好比React的JSX；
 * */
const babelLoaderConfiguration = {
  /** 正則表達式，編譯全部.js文件 */
 test: /\.js$/,
 /** 包含要編譯的目錄和文件 */
 include: [
    /** 根目錄下的index.js */
 path.resolve(appDirectory, 'index.js'),
 /** 子目錄src下全部文件 */
 path.resolve(appDirectory, 'src'),
 path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
 use: {
    loader: 'babel-loader',
 /** webpack會自動調用.babelrc裏的babel配置選項 */
 options: {
      cacheDirectory: true,
 // presets: ['react-native'],
 // plugins: ['react-native-web']
 }
  }
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
 use: {
    /**
 * file-loader解決路徑問題，url-loader根據limit值對圖片編碼，生成dataURl
 * url-loader內置了file-loader
 * */
 loader: 'url-loader',
 options: {
      name: '[name].[ext]'
 }
  }
};

module.exports = {
  /** webpack4.x增長的選項，development/production */
 mode: process.env.NODE_ENV || 'production',
 /** 開發時調試源碼，會影響編譯速度，生產環境請註釋該行 */
 devtool: 'eval-source-map',
 /** entry入口 */
 entry: [
    path.resolve(appDirectory, 'index.js'),
 ],
 /** output出口 */
 output: {
    /** 打包後輸出文件的文件名 */
 filename: 'bundle.web.js',
 /** 打包後的文件存放的地方 */
 path: path.resolve(appDirectory, 'dist')
  },
 /**
 * 經過使用不一樣的loader，webpack有能力調用外部的腳本或工具，實現對不一樣格式的文件的處理。
 * 好比分析轉換scss爲css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件，
 * 對React的開發而言，合適的Loaders能夠把React的中用到的JSX文件轉換爲JS文件。
 * loader配置選項參數說明：
 * test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
 * loader：loader的名稱（必須）
 * include/exclude：手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（可選）
 * query：爲loaders提供額外的設置選項（可選）
 * */
 module: {
    rules: [
      babelLoaderConfiguration,
 imageLoaderConfiguration
    ]
  },

 /**
 * resolve配置模塊如何解析
 * */
 resolve: {
    alias: {
      'react-native$': 'react-native-web'
 },
 /** 自動解析肯定的擴展 */
 extensions: ['.web.js', '.js'],
 /** 告訴webpack解析模塊時應搜索的目錄 */
 modules: ['node_modules']
  },
 /**
 * 使用webpack構建本地服務器
 * npm install --save-dev webpack-dev-server
 * yarn add -D webpack-dev-server
 * http://localhost:8080
 * */
 devServer: {
    /** 本地服務器所加載的頁面所在的目錄 */
 contentBase: "./dist",
 /** true全部的跳轉將指向index.html */
 historyApiFallback: true,
 /** 當源文件改變時實時刷新 */
 inline: true
 }

};

web/index.html 

<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
 <meta charset="UTF-8">
 <title>React Native Web In Superbuy App</title>
 <meta name="viewport" content="initial-scale=1.0,width=device-width">
 <style>
 html, body { height: 100%; width: 100%; overflow: hidden; }
    .react-app { height: 100%; overflow: hidden; }
  </style>
</head>
<body style="height:100%">
 <div id="react-app" style="display:flex;height:100%"></div>
 <script src="./bundle.web.js"></script>
</body>
</html>

index.js

import {AppRegistry, Platform} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

// register the app
AppRegistry.registerComponent(appName, () => App);

if (Platform.OS === 'web') {
  AppRegistry.runApplication(appName, {
    initialProps: {},
 rootTag: document.getElementById('react-app')
  });}