基于react-native & antd-mobile进行三端开发

要做移动端应用，同时要适配ios、android和微信。搜索、试验、思考...几天内进行了好几轮，最终决定采用react-native & antd-mobile来实现我们的目的。

思路&选择

在网上搜索，看到了多种方案。第一种，利用redux，共享业务逻辑，自己维护两套UI组件；第二种，利用react-native-web，先写移动端，再将移动端转换成H5；第三种：利用styled-components来封装UI组件，也要维护两套UI；第四种：利用antd-mobile来适配三端。
最终决定选择antd-mobile方式，因为其本身就是一套很好的解决方案，文档较全，实现方式简单，虽然是两套代码，但现有组件已经很多，也容易扩展。我已经修复了一个小bug，自行发布到了npm，并替换到项目中，这样能够快速方便的实现自己想要的组件。

代码编写原则

所有的界面元素都使用antd-mobile的组件来实现，不够用的，不符合要求的，直接改动antd-mobile。

关键步骤

webpack2配置

antd-mobile要支持H5，在要webpack中进行配置，打包web版的代码。

import antd-mobile

           {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [{
                    loader:'babel-loader',
                    options:{
                        presets: ['es2015', "stage-2", 'react'],
                        plugins: [ ["transform-runtime"],["import", {libraryName: "antdm", style: true}]
                        ],
                    }
                }],
            },

resolve web.*

resolve: {
        mainFiles: ["index.web","index"],// 这里哦
        modules: ['app', 'node_modules', path.join(__dirname, '../node_modules')],
        extensions: [
            '.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx',
            '.js',
            '.jsx',
            '.react.js',
        ],
        mainFields: [
            'browser',
            'jsnext:main',
            'main',
        ],
    },

布局组件

antd-mobile文档中只提了复杂的组件，但我们在H5中经常用的div与native中的View应该如何处理呢？看文档、搜索，都没有找到我想要的方法；在github中看别人家的代码，发现都是直接用了div或native的View，不能同时适配三端。以至于我一度想引入styled-components来封装，但总觉得引入styled-components只用来处理几个基本元素，不划算。最后是想起来要看看antd-mobile的源码，在antd-mobile中来做引入styled-components做的事，不就可以了吗！结果发现antd-mobile已经有封装了，就是View。

问题基本解决了，但运行时会有如下的警告信息：

Warning: Unknown prop `Component` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by View)
    in View (at Root.js:15)
    in Provider (at Root.js:14)
    in Root (at index.js:20)
    in AppContainer (at index.js:19)

看源代码，是有个小bug，顺手修改了，编译，运行，问题解决。提交pull requests，人家不可能很快的更新，而且可能有的改动只是为了适应我们自己的项目，因此发布到npm中，名字叫antdm。

程序入口

入口文件会有三个，原则是尽量保持简单

ios:index.ios.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import Root from  './src/containers/Root';
import configureStore from './src/store/configureStore.js';
const store = configureStore();
class T3 extends Component {
    render() {
        return (
            <Root store={store}/>
        );
    }
}

AppRegistry.registerComponent('t3', () => T3);

web:/src/web/index.js

import React          from 'react';
import { render }     from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root           from '../containers/Root';
import configureStore from '../store/configureStore';
const store = configureStore();
render(
  <AppContainer>
    <Root store={store} />
  </AppContainer>,
  document.getElementById('root')
)

android:index.android.js

还未编写，应该与ios差不多。

项目地址

https://git.oschina.net/zhoutk/t3.git
https://github.com/zhoutk/t3.git

使用方法

git clone https://git.oschina.net/zhoutk/t3.git
or git clone https://github.com/zhoutk/t3.git
cd t3
npm i
ios: npm run ios
web: npm run web

小结

利用react-native和antd-mobie基本达到移动端适配三端的要求，但在做项目的同时，可能需要基于antd-mobile逐步建立起一套适合自己的UI组件。谢谢阿里的兄弟们！