var Share = {};
    var React = require('react-native');
    var isNative = !window.location;
    /**
     * 判断是web的时候，重新赋值React
     */
    if (window.React) {
        React = window.React;
    } 
    Share.React = React;

    /**
     * 做底层的兼容， 当然这里只是做了一个最简demo，具体实现的时候可能会对props做各种兼容处理
     */
    if (!isNative) {

        Share.View = React.createClass({
            render: function() {
                return <div {...this.props}/>
            }
        });

        Share.P = React.createClass({
            render: function() {
                return <p {...this.props}/>
            }
        });

        Share.Span = React.createClass({
            render: function() {
                return <span {...this.props}/>
            }
        });
    } else {
        // alert('isNative')
        Share.View = React.View;
        Share.P = React.Text;
        Share.Span = React.Text;
        Share.Text = React.Text;
    }

    module.exports = Share;

build打包程序

    var fs = require('fs');
    var nativeCSS = require('native-css'),
    var cssObject = nativeCSS.convert('./styles.css');

    toStyleJs(cssObject, './styles.js');
    buildWebReact();

    /**
     * native-css获取到得是一个对象，需要将cssObject转化为js代码
     */
    function toStyleJs(cssObject, name) {
        console.LOG('build styles.js n');
        var tab = '    ';
        var str = '';

        str += '/* build header */n';
        str += 'var styles = {n';

        for(var key in cssObject) {
            var rules = cssObject[key];
            str += tab + key + ': {n';
            for(var attr in rules) {
                var rule = rules[attr];
                str += tab + tab + attr + ': ' + format(rule) + ',n'
            }
            str += tab + '},n' 
        }

        str += '};n'
        str += 'module.exports = styles;n'

        fs.writeFile(name, str)
        function format(rule) {
            if (!isNaN(rule - 0)) {
                return rule;
            }
            return '"' + rule + '"';
        }
    }

    /**
     * 构造web使用的react
     */
    function buildWebReact() {
        console.log('build web bundle');
        var browserify = require('browserify');
        var b = browserify();
        b.add('./index.web.js');

        // 添加es6支持
        b.transform('reactify', {'es6': true});

        // ignore掉react-native 
        b.ignore('react-native')
        var wstream = fs.createWritestream('./web/index.web.js');
        b.bundle().pipe(wstream);
    }

也尝试一下由react-native 到react-web的兼容方案

问题

1. flexbox的写法在react-native上面我们会发现， 不用在父元素上声明display: flex; 在web上必须要做这样的声明， 所以我们需要让设置了flex:*的元素的父元素display: flex; 。
2. flexbox在android上是由很多bug的，所以必须要解决兼容性问题webkit-box

解决方案

1. nested 的style写法

    styles = StyleSheet.create({
        mod: {
            flexDirection: 'row',
            item: {
                flex: 1
            }
        }
    });

这样的写法有些像less，我们可以知道元素的层级关系， 这样我可以遍历这个对象，查找子元素有设置flex的，父元素加上display:flexbox。

2. 通过自定义元素

 var GridSystem = require('GridSystem');
 var {
    Row,
    Grid,
    Grid6,
    Grid4
 } = GridSystem;
 <Row ...>
    <Grid/>
    <Grid/>
 </Row>

通过标签的方式， 相当于给react-native或者react添加了一个网格系统，同时我们可以直接在Row上设置display:flex.

3. 遍历查找

完全同react-native原生的写法，直接在web中兼容，遍历所有有flex样式的节点，直接做兼容。

    componentDidmount: function() {
        var $node = this.getDOMNode();
        var $parent = $node.parentNode;
        var $doCFrag = document.createDocumentFragment();
        $docfrag.appendChild($node);

        var treeWalker = document.createTreeWalker($node, NodeFilter.SHOW_ELEMENT, { 
            acceptNode: function(node) { 
                return NodeFilter.FILTER_ACCEPT; 
            } 
        }, false);

        while(treeWalker.nextNode()) {
            var node = treeWalker.currentNode;
            if (node.style.flex) {
                flexChild(node);
                flexParent(node.parentNode);
            }
        };

        $parent.appendChild($docfrag);
    }

    function flexChild(node) {
        if (node.__flexchild__) {
            return;
        }
        node.__flexchild__ = true;
        var flexGrow = node.style.flexGrow;
        addStyle(node, `
            -webkit-box-flex: ${flexGrow};
            -webkit-flex: ${flexGrow};
            -ms-flex: ${flexGrow};
            flex: ${flexGrow};
        `);
        node.classList.add('mui-flex-cell');
    }

    function flexParent(node) {
        if (node.__flexparentd__) {
            return;
        }
        node.__flexparentd__ = true;
        node.classList.add('mui-flex');
    }

    .mui-flex {
        display: -webkit-box!important;
        display: -webkit-flex!important;
        display: -ms-flexbox!important;
        display: flex!important;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .mui-flex-cell {
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
        display: block;
        position: relative;
    }

总结

这个demo很简单，实际应用中应该会有很多地方的坑， 比如：

1. 模块中依赖只有native才有的组件
2. Native模块的事件处理和web大不相同
3. 现实环境中的模块更多，更复杂，如何做模块的管理

对于write once, run anywhere 这个观点. 相信不同的人会有不同的看法，但无论如何，如果兼容成本不大，这样的兼容技术方案对业务开发是有极大意义的。

ps0: 这里仅仅做可行性方案的分析，不代表我认同或不认同这种方案。
ps1: 大家如果有更好的方案，求教，求讨论。
ps2: 据说微博关注@sysu_学家不会怀孕

脚本宝典总结

以上是脚本宝典为你收集整理的React-Native 与 React-Web 的融合全部内容，希望文章能够帮你解决React-Native 与 React-Web 的融合所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。