阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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,
      },
    });
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录