阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      react-native-web 学习笔记

      React Native for Web

      eact Native 转 web 方案:React Native for Web

      “Learn once, write anywhere”是 react 提出的口号,在 react-native 开源后,这个口号得到了实现,我们只需要学会 react,就能同时在 web 端,安卓和 ios 开发应用。但是,react-native 在安卓和 ios 端能达到百分之九十以上的代码复用,却不能运行在移动 H5 端,我们不得不另外开发一套 H5 代码,以使应用能在手机浏览器上使用。react-native-web 就是这样一个将 react-native 应用转换成 H5 的库,以让我们能达到“Write one, run everywhere”。

      官方资料

      实现原理

      在写代码之前,我们浅析一下这个库的实现。在我们的 react-native 代码中,所有的控件都是 import 自 react-native

      import { View, Text, TextInput } from 'react-native';
      

      那如果我们把这些组件全部在 web 上重新实现一遍,就能使其运行在 web 端了,用 div 代替 View,用 input 代替 TextInput,用 img 代替 Image,再加上相应的默认样式,这样我们写的 RN 代码就能平滑地迁移到 web 端,并且能在样式上基本保持一致性。react-native-web 就是这样一个库,他 react-native 的大部分组件都用 web 实现了一遍以达到我们的代码能在 web 运行的要求。

      代码实现

      在我们实现 web 端运行时,要尽量做到不侵入 RN 代码,不影响 RN 代码的逻辑,争取能够在基本不动 RN 项目代码的情况下,将其 H5 化。 这里我们先开始一个简单的 demo,首先使用 react-native-cli 初始化一个项目。

      $ sudo npm i -g react-native-cli
      $ react-native init rnweb
      

      然后就可以编译原生 Android 或 ios 项目,使用模拟器打开了。而在 web 端我们需要使用 webpack 来编译运行代码,现在编写一个普通的 react 项目的 webpack.config.js 文件,与普通的 web 端 webpack 配置基本一致,唯一不同的是我们需要在 resolve 中加两项

      {
          resolve: {
              alias: { 'react-native': 'react-native-web' },
              modules: ['web_modules', 'node_modules'],
          },
      }
      

      其中 alias 的别名使 RN 代码中 import 自 react-native 的组件指向了 react-native-web。modules 是为了在某些依赖于 react-native 的第三方库无法直接转换成 H5 时,我们可以自行进行编写。

      然后就可以运行 npm run web 打开网页了,

      import React, { Component } from 'react';
      import {
        Platform,
        StyleSheet,
        Text,
        View
      } from 'react-native';
      
      const instructions = Platform.select({
        ios: 'Press Cmd+R to reload,\n' +
          'Cmd+D or shake for dev menu',
        android: 'Double tap R on your keyboard to reload,\n' +
          'Shake or press menu button for dev menu',
        web: 'Press Cmd+R or F12 reload'
      });
      
      export default class App extends Component {
        render() {
          return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
              <Text style={styles.instructions}>
                To get started, edit App.js
              </Text>
              <Text style={styles.instructions}>
                {instructions}
              </Text>
            </View>
          );
        }
      }
      
      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,
        },
      });
      
      目录
      目录