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

   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 project

import 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

如下,说明配置完成

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值