我可以将 Backbone 与 React Native 一起使用吗？

Question

我在网上找到了几个将 React (View) 与 Backbone 集成的不同示例，但没有找到任何与 React Native 集成的示例。我想知道这是否可能，以及是否有任何样本可以玩。

这（https://github.com/magalhas/backbone-react-component）似乎也是一个很好的起点，但由于我没有任何知识，我不确定它是否仍然可以在React Native中使用。

谢谢。

Answer 1

是的，您将能够使用 Backbone 的某些部分。

Backbone 的视图在 Web 浏览器中的 DOM 上进行操作，并且由于 React Native 没有该功能，因此您将无法按原样使用 Backbone 视图。

但是，请注意 Backbone.React.Component 被描述为“将 Backbone 模型和集合粘合到 React 组件中的 mixin”。因此，它充当应用程序的数据层，为您的视图提供数据。

这在理论上很有用，但在实践中我刚刚尝试过，但实际上并不起作用！也就是说，我确实设法调整 Backbone.React.Component 的代码来修复它，并且这个演示有效：

'use strict';

var React = require('react-native');
var Backbone = require('backbone');
var backboneMixin = require('backbone-react-component');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var MyComponent = React.createClass({
    mixins: [backboneMixin],
    render: function () {
        return <Text>{this.state.model.foo}</Text>
    }
});

var model = new Backbone.Model({foo: 'bar'});
model.set('foo', 'Hello world!');

var ReactNativeBackbone = React.createClass({
    render: function() {
        return (
        <View>
            <MyComponent model={model} />
        </View>
        );
    }
});

AppRegistry.registerComponent('ReactNativeBackbone', () => ReactNativeBackbone);

foo您将看到屏幕上显示的模型的值“Hello world!”。您需要在 Backbone.React.Component 中编辑 lib/component.js，如下所示：

diff --git a/node_modules/backbone-react-component/lib/component.js b/fixed.js
index e58dd96..0ca09f7 100644
--- a/node_modules/backbone-react-component/lib/component.js
+++ b/fixed.js
@@ -32,7 +32,7 @@
   if (typeof define === 'function' && define.amd) {
     define(['react', 'backbone', 'underscore'], factory);
   } else if (typeof module !== 'undefined' && module.exports) {
-    module.exports = factory(require('react'), require('backbone'), require('underscore'));
+    module.exports = factory(require('React'), require('backbone'), require('underscore'));
   } else {
     factory(root.React, root.Backbone, root._);
   }
@@ -70,11 +70,11 @@
     },
     // Sets `this.el` and `this.$el` when the component mounts.
     componentDidMount: function () {
-      this.setElement(React.findDOMNode(this));
+      //this.setElement(React.findDOMNode(this));
     },
     // Sets `this.el` and `this.$el` when the component updates.
     componentDidUpdate: function () {
-      this.setElement(React.findDOMNode(this));
+      //this.setElement(React.findDOMNode(this));
     },
     // When the component gets the initial state, instance a `Wrapper` to take
     // care of models and collections binding with `this.state`.

我做了两处改变：

• 需要React而不是react
• 删除对的引用findDOMNode

我还没有进行任何广泛的测试，但这应该可以帮助您开始。我还提出了一个问题，尝试在主 Backbone.React.Component 代码库中解决问题。