React Native三端同构

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导入，如下所示

1.  
   alias: {
2.  
   'react-native': 'react-native-web'
3.  
   },

具体接入

接入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服务的命令，如下

1.  
   "scripts": {
2.  
   "debug-rn": "react-native start --reset-cache",
3.  
   }

接入react-native-web

执行以下命令

npm install react-native-web

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

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

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

1.  
   alias: {
2.  
   '@ant-design/react-native': 'antd-mobile'
3.  
   }

修改工程

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

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

1.  
   import React from 'react';
2.  
   import {
3.  
   AppRegistry,
4.  
   StyleSheet,
5.  
   Text,
6.  
   View
7.  
   } from 'react-native';
8.  
   import App from './App';
9.  
    
10.  
     
11.  
    AppRegistry.registerComponent(
12.  
    'MyReactNativeApp', // MyReactNativeApp是注册模块，改成你自己的就行
13.  
    () => App
14.  
    );

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

1.  
   // In App.js in a new project
2.  
    
3.  
   import React, { useState } from 'react';
4.  
   import { View, Text, Button, Image,StyleSheet } from 'react-native';
5.  
    
6.  
   function App() {
7.  
   return (
8.  
   <View >
9.  
   <Text style={styles.hello}>文本一</Text>
10.  
    <Text style={{fontSize: 40, backgroundColor: "#f00"}}>文本2</Text>
11.  
    </View>
12.  
    );
13.  
    }
14.  
     
15.  
    const styles = StyleSheet.create({
16.  
    container: {
17.  
    flex: 1,
18.  
    justifyContent: 'center'
19.  
    },
20.  
    hello: {
21.  
    fontSize: 20,
22.  
    textAlign: 'center',
23.  
    margin: 10,
24.  
    }
25.  
    });
26.  
     
27.  
    export default App;

调试

执行npm run start，检查Web效果

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

如下，说明配置完成

这篇好文章是转载于：学新通技术网