React Native轉web方案：react-native-web

hujiao發表於2018-08-19

本文將從三個方面分享 react native 轉 web 方案：react-native-web

react-native-web 的使用
react-native-web 原始碼分析
react-native-web 實踐

react-native-web：github.com/necolas/rea…

使用

安裝

yarn add react react-dom react-native-web
複製程式碼

如果使用了 ART，需要安裝 react-art（比如，使用了 react-native-svg 來做RN端icon方案，這就是基於 react-art）

yarn add react-art
複製程式碼

安裝好之後，使用主要分一下兩步：

webpack配置
入口處新增配置

webpack配置

webpack配置就跟普通 React web 應用配置一致即可，然後新增alias配置，如下：

// webpack.config.js
module.exports = {
  // ...the rest of your config
  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    }
  }
}
複製程式碼

入口處新增配置

有兩種方式：

使用 AppRegistry API
使用 render 方法

使用 AppRegistry API

在新增配置之前，首先看看RN的入口檔案：

// index.js
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('rn_web', () => App);
複製程式碼

新增配置之後，如下：

// index.web.js
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('rn_web', () => App);

AppRegistry.runApplication('rn_web', {
    rootTag: document.getElementById('react-root')
});
複製程式碼

使用 render 方法

使用 render 方法如下：

import { render } from 'react-native';
import App from './App';

render(<App/>, rootTag: document.getElementById('react-root'));
複製程式碼

可以看到，AppRegistry API 更貼近RN的寫法，render 方法跟 ReactDOM.render 是一個意思。

以上，就能夠將現有RN頁面轉成web頁面了

接下來，以 AppRegistry API 為入口，看看 react-native-web 做了什麼

react-native-web 原始碼分析

從三部分來對原始碼進行分析：

入口，即 AppRegistry API
API，即對 RN API 實現
元件，即對 RN 元件實現

入口：AppRegistry API

入口檔案程式碼：

// index.web.js
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('rn_web', () => App);

AppRegistry.runApplication('rn_web', {
    rootTag: document.getElementById('react-root')
});
複製程式碼

那我們來來看看這兩個 API 都做了什麼

AppRegistry.registerComponent

const runnables = {};
static registerComponent(appKey: string, componentProvider: ComponentProvider): string {
    runnables[appKey] = {
        getApplication: appParameters => getApplication(componentProviderInstrumentationHook(componentProvider), appParameters ? appParameters.initialProps : emptyObject, wrapperComponentProvider && wrapperComponentProvider(appParameters)),
        run: appParameters => renderApplication(componentProviderInstrumentationHook(componentProvider), appParameters.initialProps || emptyObject, appParameters.rootTag, wrapperComponentProvider && wrapperComponentProvider(appParameters), appParameters.callback)
    };
    return appKey;
}
複製程式碼

以例子程式碼為例，此方法就是定義了 runnables['rn_web'] 物件，此物件有 getApplication、run 兩個方法

AppRegistry.runApplication

static runApplication(appKey: string, appParameters: Object): void {
    runnables[appKey].run(appParameters);
}
複製程式碼

以例子程式碼為例，此方法就是呼叫了

runnables['rn_web'].run({
    rootTag: document.getElementById('react-root')
})
複製程式碼

這裡的 appParameters 資料結構如下：

{
    initialProps, // 初始props
    rootTag, // root DOM節點
    callback, // 回撥函式
}
複製程式碼

renderApplication

import { render } from 'react-dom';
const renderFn = render;
function renderApplication<Props: Object>(RootComponent: ComponentType<Props>, initialProps: Props, rootTag: any, WrapperComponent?: ?ComponentType<*>, callback?: () => void) {
    renderFn(
        <AppContainer WrapperComponent={WrapperComponent} rootTag={rootTag}>
            <RootComponent {...initialProps} />
        </AppContainer>,
        rootTag,
        callback
    );
}
複製程式碼

實際呼叫的是：

ReactDOM.render(
    <AppContainer WrapperComponent={WrapperComponent} rootTag={rootTag}>
        <App {...initialProps} />
    </AppContainer>,
    rootTag,
    callback
);
複製程式碼

AppContainer

export default class AppContainer extends Component<Props, State> {
  state = { mainKey: 1 };

  static childContextTypes = {
    rootTag: any
  };

  static propTypes = {
    WrapperComponent: any,
    children: node,
    rootTag: any.isRequired
  };

  getChildContext(): Context {
    return {
      rootTag: this.props.rootTag
    };
  }

  render() {
    const { children, WrapperComponent } = this.props;
    let innerView = (
      <View
        children={children}
        key={this.state.mainKey}
        pointerEvents="box-none"
        style={styles.appContainer}
      />
    );

    if (WrapperComponent) {
      innerView = <WrapperComponent>{innerView}</WrapperComponent>;
    }
    return (
      <View pointerEvents="box-none" style={styles.appContainer}>
        {innerView}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1
  }
});
複製程式碼

API

以 StyleSheet 為例，分析 react-native-web API 原始碼

我們都知道，RN中使用的樣式表是CSS的子集，我們來看看 react-native-web 對樣式表的處理

StyleSheet

const StyleSheet = {
  absoluteFill,
  absoluteFillObject,
  compose(style1, style2) {
    ...
  },
  create(styles) {
    ...
  },
  flatten: flattenStyle,
  hairlineWidth: 1
};
複製程式碼

RN的StyleSheet模組有以下幾個方法和常量：

1、方法：

setStyleAttributePreprocessor（此方法存在風險）
create
flatten

2、常量：

hairlineWidth
absoluteFill
absoluteFillObject

可以發現，react-native-web 中 StyleSheet 定義了除 setStyleAttributePreprocessor（此方法存在風險）方法之外的所有方法和常量。此外，還新增了 compose 方法，此方法在 react-native-web 的元件中使用

首先來看看 StyleSheet.create 方法

StyleSheet.create

create(styles) {
  const result = {};
  Object.keys(styles).forEach(key => {
    const id = styles[key] && ReactNativePropRegistry.register(styles[key]);
    result[key] = id;
  });
  return result;
}
複製程式碼

程式碼比較簡單，主要就是遍歷styles，對所有styles呼叫 ReactNativePropRegistry.register 獲取對應的id，返回對應 key-id 的物件。我們先看個例子：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  ellipsis: {
    width: 200,
  }
});

console.log(styles);
複製程式碼

我們來看看列印出來的styles是什麼？

{container: 78, welcome: 79, instructions: 80, ellipsis: 81}
複製程式碼

接著來看看 ReactNativePropRegistry.register 做了什麼

ReactNativePropRegistry

const emptyObject = {};
const objects = {};
const prefix = 'r';
let uniqueID = 1;

const createKey = id => `${prefix}-${id}`;

export default class ReactNativePropRegistry {
  static register(object: Object): number {
    const id = uniqueID++;
    if (process.env.NODE_ENV !== 'production') {
      Object.freeze(object);
    }
    const key = createKey(id);
    objects[key] = object;
    return id;
  }

  static getByID(id: number): Object {
    if (!id) {
      return emptyObject;
    }
    const key = createKey(id);
    const object = objects[key];
    if (!object) {
      return emptyObject;
    }
    return object;
  }
}
複製程式碼

這個模組，定義了兩個方法：register、getByID，register 是將樣式物件存入 objects 物件中，並返回對應的 id；getByID 則是通過 id 獲取對應的樣式物件

在react-native-web整個樣式轉換過程中，除了StyleSheet.create，還需要關注一下 StyleSheet.flatten 方法，即 flattenStyle

flattenStyle

function getStyle(style) {
  if (typeof style === 'number') {
    return ReactNativePropRegistry.getByID(style);
  }
  return style;
}

function flattenStyle(style: ?StyleObj): ?Object {
  if (!style) {
    return undefined;
  }

  if (!Array.isArray(style)) {
    return getStyle(style);
  }

  const result = {};
  for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
    const computedStyle = flattenStyle(style[i]);
    if (computedStyle) {
      for (const key in computedStyle) {
        const value = computedStyle[key];
        result[key] = value;
      }
    }
  }
  return result;
}
複製程式碼

flattenStyle 方法接受的 styles 引數是存有樣式表id的陣列或變數，通過遞迴遍歷 styles，呼叫上一部分提到的 ReactNativePropRegistry.getByID 方法，通過id獲取對應的樣式物件，並返回。

以上，我們以 StyleSheet 為例分析了 react-native-web 實現 RN API 的原始碼。

元件

以 View 元件為例，分析 react-native-web 元件的原始碼

const calculateHitSlopStyle = hitSlop => {
  const hitStyle = {};
  for (const prop in hitSlop) {
    if (hitSlop.hasOwnProperty(prop)) {
      const value = hitSlop[prop];
      hitStyle[prop] = value > 0 ? -1 * value : 0;
    }
  }
  return hitStyle;
};

class View extends Component<ViewProps> {
  static displayName = 'View';

  static contextTypes = {
    isInAParentText: bool
  };

  static propTypes = ViewPropTypes;

  render() {
    const hitSlop = this.props.hitSlop;
    const supportedProps = filterSupportedProps(this.props);

    const { isInAParentText } = this.context;

    supportedProps.style = StyleSheet.compose(
      styles.initial,
      StyleSheet.compose(isInAParentText && styles.inline, this.props.style)
    );

    if (hitSlop) {
      const hitSlopStyle = calculateHitSlopStyle(hitSlop);
      const hitSlopChild = createElement('span', { style: [styles.hitSlop, hitSlopStyle] });
      supportedProps.children = React.Children.toArray([hitSlopChild, supportedProps.children]);
    }

    return createElement('div', supportedProps);
  }
}

const styles = StyleSheet.create({
  // https://github.com/facebook/css-layout#default-values
  initial: {
    alignItems: 'stretch',
    borderWidth: 0,
    borderStyle: 'solid',
    boxSizing: 'border-box',
    display: 'flex',
    flexDirection: 'column',
    margin: 0,
    padding: 0,
    position: 'relative',
    zIndex: 0,
    // fix flexbox bugs
    minHeight: 0,
    minWidth: 0
  },
  inline: {
    display: 'inline-flex'
  },
  // this zIndex-ordering positions the hitSlop above the View but behind
  // its children
  hitSlop: {
    ...StyleSheet.absoluteFillObject,
    zIndex: -1
  }
});

export default applyLayout(applyNativeMethods(View));
複製程式碼

View 元件就是一個簡單的React元件，首先關注一下：

export default applyLayout(applyNativeMethods(View));
複製程式碼

其中，applyNativeMethods 方法是將native的方法轉換為對應的DOM方法；applyLayout 方法是對元件的生命週期函式進行重寫。這部分感興趣的小夥伴自行了解~

接下來關注一下 View 元件的 render 方法，主要是對元件的 props 做些處理，包括校驗 props 是否支援、style 處理，最後呼叫 createElement 方法

createElement

const createElement = (component, props, ...children) => {
  // use equivalent platform elements where possible
  let accessibilityComponent;
  if (component && component.constructor === String) {
    accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
  }
  const Component = accessibilityComponent || component;
  const domProps = createDOMProps(Component, props);
  adjustProps(domProps);
  return React.createElement(Component, domProps, ...children);
};
複製程式碼

最終是呼叫了 React.createElement 方法建立 React Element，在此之前，主要做的事情就是呼叫 createDOMProps 方法，得到 domProps

createDOMProps

const createDOMProps = (component, props, styleResolver) => {
  ...
  const {
    ...
    ...domProps
  } = props;

  // GENERAL ACCESSIBILITY
  ...

  // DISABLED
  ...

  // FOCUS
  // Assume that 'link' is focusable by default (uses <a>).
  // Assume that 'button' is not (uses <div role='button'>) but must be treated as such.
  ...

  // STYLE
  // Resolve React Native styles to optimized browser equivalent
  const reactNativeStyle = [
    component === 'a' && resetStyles.link,
    component === 'button' && resetStyles.button,
    role === 'heading' && resetStyles.heading,
    component === 'ul' && resetStyles.list,
    role === 'button' && !disabled && resetStyles.ariaButton,
    pointerEvents && pointerEventsStyles[pointerEvents],
    providedStyle,
    placeholderTextColor && { placeholderTextColor }
  ];
  const { className, style } = styleResolver(reactNativeStyle);
  if (className && className.constructor === String) {
    domProps.className = props.className ? `${props.className} ${className}` : className;
  }
  if (style) {
    domProps.style = style;
  }

  // OTHER
  // Link security and automation test ids
  ...
  return domProps;
};
複製程式碼

createDOMProps 方法程式碼較長，這裡就不全部貼上，從幾個註釋可以知道，此方法主要是將各 props 轉換成對應的 web 端的props，這裡我們以 style 為例，看看是如何做轉換的。

樣式轉換工作量主要在 styleResolver 方法，即呼叫 ReactNativeStyleResolver 例項的 resolve 方法。此方法最後會返回 className 和 style，最後會賦值到 domProps 中

styleResolver

resolve(style) {
  // fast and cachable
  // style: id
  if (typeof style === 'number') {
    this._injectRegisteredStyle(style);
    const key = createCacheKey(style);
    return this._resolveStyleIfNeeded(style, key);
  }
  // resolve a plain RN style object
  // style: 樣式物件
  if (!Array.isArray(style)) {
    return this._resolveStyleIfNeeded(style);
  }
  // flatten the style array
  // cache resolved props when all styles are registered
  // otherwise fallback to resolving
  // style: 儲存id的陣列
  const flatArray = flattenArray(style);
  let isArrayOfNumbers = true;
  for (let i = 0; i < flatArray.length; i++) {
    const id = flatArray[i];
    if (typeof id !== 'number') {
      isArrayOfNumbers = false;
    } else {
      this._injectRegisteredStyle(id);
    }
  }
  const key = isArrayOfNumbers ? createCacheKey(flatArray.join('-')) : null;
  return this._resolveStyleIfNeeded(flatArray, key);
}
複製程式碼

接下來看看 _injectRegisteredStyle 和 _resolveStyleIfNeeded

_injectRegisteredStyle

_injectRegisteredStyle(id) {
  const { doLeftAndRightSwapInRTL, isRTL } = I18nManager;
  const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr';
  if (!this.injectedCache[dir][id]) {
    // 根據id獲取對應的樣式物件
    const style = flattenStyle(id);
    // 對樣式物件格式化：各樣式屬性排序；新增長度單位；顏色值處理；特定屬性處理；返回格式化之後的樣式物件
    const domStyle = createReactDOMStyle(i18nStyle(style));
    Object.keys(domStyle).forEach(styleProp => {
      const value = domStyle[styleProp];
      if (value != null) {
        // 將樣式插入 WebStyleSheet（domStyleElement.sheet）中
        this.styleSheetManager.injectDeclaration(styleProp, value);
      }
    });
    // 將此樣式標記為已插入
    this.injectedCache[dir][id] = true;
  }
}
複製程式碼

其中，styleSheetManager.injectDeclaration 是基於 domStyleElement.sheet 對頁面樣式進行插入操作，我們可以看看轉出來的web頁面的樣式：

_resolveStyleIfNeeded

_resolveStyleIfNeeded 方法即是呼叫 _resolveStyle 方法，原始碼如下：

_resolveStyle(style) {
  // 獲取對應id的樣式物件
  const flatStyle = flattenStyle(style);
  // 對樣式物件格式化：各樣式屬性排序；新增長度單位；顏色值處理；特定屬性處理；返回格式化之後的樣式物件
  const domStyle = createReactDOMStyle(i18nStyle(flatStyle));

  const props = Object.keys(domStyle).reduce(
    (props, styleProp) => {
      const value = domStyle[styleProp];
      if (value != null) {
        // 獲取 WebStyleSheet 中特定樣式屬性及值對應的className
        // 通過 StyleSheet.create 建立的樣式，會插入到 WebStyleSheet
        const className = this.styleSheetManager.getClassName(styleProp, value);
        if (className) {
          // 將此className放入props.classList中
          props.classList.push(className);
        } else {
          // Certain properties and values are not transformed by 'createReactDOMStyle' as they
          // require more complex transforms into multiple CSS rules. Here we assume that StyleManager
          // can bind these styles to a className, and prevent them becoming invalid inline-styles.
          // 單條樣式屬性，如果不是特殊屬性，則直接放進props.style中
          // 單條樣式屬性是指未通過 StyleSheet.create 建立的樣式
          if (
            styleProp === 'pointerEvents' ||
            styleProp === 'placeholderTextColor' ||
            styleProp === 'animationName'
          ) {
            const className = this.styleSheetManager.injectDeclaration(styleProp, value);
            if (className) {
              props.classList.push(className);
            }
          } else {
            if (!props.style) {
              props.style = {};
            }
            // 4x slower render
            props.style[styleProp] = value;
          }
        }
      }
      return props;
    },
    { classList: [] }
  );

  props.className = classListToString(props.classList);
  if (props.style) {
    props.style = prefixInlineStyles(props.style);
  }
  return props;
}
複製程式碼

此方法主要是獲取所有樣式對應的 className 或者 style，並存入props中返回

以上，我們以 View 元件為例分析了 react-native-web 實現 RN 元件的原始碼。

我們做完原始碼分析之後，我們看看如何基於 react-native-web 做一些修改

實踐

以 Text 元件為例，RN Text元件可以設定 numberOfLines，來實現單行或多行省略，但是react-native-web只實現了單行省略，所以我們要把多行省略的功能加上，程式碼如下：

class Text extends Component<*> {
  ...
  render() {
    ...
    // allow browsers to automatically infer the language writing direction
    otherProps.dir = dir !== undefined ? dir : 'auto';
    otherProps.style = [
      styles.initial,
      this.context.isInAParentText === true && styles.isInAParentText,
      style,
      selectable === false && styles.notSelectable,
      numberOfLines === 1 && styles.singleLineStyle,
      onPress && styles.pressable
    ];
    // 支援多行省略
    if (numberOfLines > 1) {
      otherProps.style.push({
        display: '-webkit-box',
        WebkitBoxOrient: 'vertical',
        WebkitLineClamp: numberOfLines,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      });
    }
    const component = isInAParentText ? 'span' : 'div';
    return createElement(component, otherProps);
  }
  ...
}
複製程式碼

舉的這個例子比較簡單，想表達的是我們通過看react-native-web原始碼，在開發過程中，遇到了轉換web的問題，我們可以通過修改原始碼、或者使用它提供的API來解決

具體程式碼可以參考示例專案：rn_web，包括原始碼註釋和例項程式碼

寫在最後

以上就是我對 react-native-web 原始碼的分享，希望能對有需要的小夥伴有幫助~~~

喜歡我的文章小夥伴可以去我的個人部落格點star ⭐️

React Native Icon方案：react-native-svg
2018-09-01
React NativeSVG
搜車 React Native 依賴管理方案
2019-02-22
React Native
Flutter VS React Native，跨端方案大 PK
2022-01-06
FlutterReact Native跨端
[React Native]react-native-scrollab
2021-09-09
React Native
React Native SDK 升級問題及分包方案
2021-08-13
React Native
[譯] React Native 中使用轉場動畫！
2018-08-07
React Native動畫
React Native 使用 react-native-webview 渲染 HTML
2019-10-21
React NativeWebViewHTML
iOS React Native 混合開發整合React Native
2017-07-24
iOSReact Native
React Native填坑之旅--多平臺支援之Web
2021-11-04
React NativeWeb
react native之android多包共存解決方案
2019-04-30
React NativeAndroid
webstom裡面配置執行React Native的方案
2016-06-01
WebReact Native
react-native配置react-native-image-crop-picker
2019-04-26
React
React Native 上手
2019-04-27
React Native
react-native
2018-07-19
React
react native FlatList
2018-01-31
React Native
Hello React Native
2017-12-14
React Native
React Native / React除錯技巧
2019-03-01
React Native除錯
關於React Native報Cannot access ‘serviceOf‘的解決方案
2022-04-08
React Native
《React Native高效開發》之create-react-native-app
2019-03-04
React NativeAPP
前端和React Native程式碼互轉總結
2018-03-02
前端React Native
React Native選擇器元件-react-native-slidepicker
2021-02-18
React Native元件IDE
react native 包學不包會系列--認識react native
2019-01-01
React Native
技術實踐丨React Native 專案 Web 端同構
2021-01-19
React NativeWeb
react-native呼叫native步驟
2016-11-27
React
react/react-native效能優化
2018-12-14
React優化
從 React Native 到 Flutter，移動跨平臺方案的真相
2019-05-09
React NativeFlutter
詳解 React Native
2019-03-02
React Native
React Native 熱更新
2018-11-12
React Native
Redux for react native 指南
2018-09-27
ReduxReact Native
react native fetch
2018-01-31
React Native
React Native List列表
2016-10-18
React Native
react native快速上手
2017-11-24
React Native
react-native打包
2017-12-19
React
React Native雜談
2016-05-04
React Native
[譯] Airbnb 在 React Native 上下的賭注（四）：React Native 退役
2018-07-10
AIReact Native
[React Native] Animate the Scale of a React Native Button using Animated.spring
2017-11-06
React NativeSpring
React-Native ‘WKWebView` has no propType for native prop
2020-12-31
ReactWebView
React Native學習認識Recat Native
2017-07-03
React Native