React Native三端同构，即iOS、Android、Web共用一套代码，已知React Native已经支持iOS、Android，所以只需要做支持Web的工作就行了。

如何同构

我们可以利用现有框架来实现，主要以下步骤

1、使用create-react-app 来创建React Web项目

2、安装react-native模块，这一步其实就具备Android、iOS的能力了

npm install react-native

3、使用react-native-web ，可以跟React Native一样的API，如React Native是如下引用的

import { Text } from "react-native"

react-native-web是如下引用的

import { Text } from "react-native-web"

然后用webpack的alias属性，将react-native模块导入改成react-native-web导入，如下所示

   alias: {'react-native': 'react-native-web'},

具体接入

接入create-react-app

利用create-react-app创建Web项目，首先执行以下命令，安装create-react-app(要求npm 6+)

npm install -g create-react-app

执行以下命令创建React Web 项目

npm init react-app my-app

cd到my-app目录

cd my-app

执行以下命令，开放所有配置项

npm run eject

执行完，可以看到生成了config文件夹，我们后面步骤要修改webpack.config.js，目录如下

执行以下命令看服务是否正常

npm start

启动以下界面说明服务正常

接入React Native

执行以下命令

npm install react-native

在package.json，增加起React Native服务的命令，如下

  "scripts": {"debug-rn": "react-native start --reset-cache",}

接入react-native-web

执行以下命令

npm install react-native-web

然后检查config/webpack.config.js，是否有以下配置，默认是有的

      alias: {// Support React Native Web// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/'react-native': 'react-native-web'},

这个是webpack的alias属性，可以将你的导入模块react-native，改为从react-native-web导入，如果你也引入阿里的antd，可以如下转换

alias: {'@ant-design/react-native': 'antd-mobile'
}

修改工程

增加src/index.native.js文件，.native代表Andriod、iOS用的文件，如下所示

|-- src|-- index.js  web使用|-- index.native.js Android、iOS使用

import React from 'react';
import {AppRegistry,StyleSheet,Text,View
} from 'react-native';
import App from './App';AppRegistry.registerComponent('MyReactNativeApp',  // MyReactNativeApp是注册模块，改成你自己的就行() => App
);

修改src/App.js，代码如下

// In App.js in a new projectimport React, { useState } from 'react';
import { View, Text, Button, Image,StyleSheet } from 'react-native';function App() {return (<View ><Text style={styles.hello}>文本一</Text><Text style={{fontSize: 40, backgroundColor: "#f00"}}>文本2</Text></View>);
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center'},hello: {fontSize: 20,textAlign: 'center',margin: 10,}
});export default App;

调试

执行npm run start，检查Web效果

执行npm run debug-rn，检查React Native

如下，说明配置完成

React Native三端同构相关推荐

React Native 三端同构实战
WeiboGoogle+用电子邮件发送本页面 0 React Native 三端(Web.iOS.Android)同构是指在不改动原 React Native 的代码下,让其在浏览器中运行出和在 Re ...
React Native 三端同构实践
⚠️ 博客中涉及的代码内容可查看 Github: react-native-isomorphism React Native三端同构皆在
React Native三端同构（二： webpack@4脚手架构建和项目代码规范）
(一)前言一个完整的web开发手脚架,应该包含以下 babel-loader 图片音视频字体样式处理等loader 开发环境配置生产环境配置,流程化前端多生产构建生产环境打包优化, 如构建 ...
React Native三端融合在沪江的应用实践
内容来源:2017年3月11日,沪江web前端开发工程师陈达孚在"中生代技术&iTechPlus年度大会(上海)"进行<基于react native三端融合的应用和实 ...
react native Android端保持APP后台运行--封装 Headless JS
react native Android端保持APP后台运行--封装 Headless JS 前些日子在做后台下载时踩了后台运行这个大坑,RN官网文档上面在安卓上提供了Headless JS方法,iO ...
为什么学习React Native三点原因
React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react native 电脑端模拟器安装app，so包缺失异常导致app闪退
项目场景: 客户需要在网易mumu模拟器上安装使用打包后的RN app 问题描述: app包在模拟器上安装运行,打开的第一时间就崩溃退出原因分析: 用Android studio监听网易mumu模拟 ...
React Native Android端多环境自动打包
文章目录 1.技术环境搭建 2.配置Android构建参数. 3.编辑复制文件到指定位置的脚本 4.Jenkins创建工程 5.下载nginx,配置相关参数.HTTPS证书 6.写iOS下载配置文件p ...

React Native三端同构