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,
  },
});

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang