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

Posted 2023-03-14

【中文标题】我可以将 Backbone 与 React Native 一起使用吗？

【英文标题】：Can I use Backbone with React Native?

【发布时间】：2015-06-14 10:06:19

【问题描述】：

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

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

谢谢。

【参考方案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 的引用

我没有进行任何广泛的测试，但这应该可以帮助您入门。我还 opened an issue 尝试在主 Backbone.React.Component 代码库中解决问题。

【讨论】：

嗨 Colin，在您的差异中，您正在删除“this.setElement(React.findDOMNode(this));”然后再添加，我是不是要把这两个函数中的整行去掉？

哎呀，差异是错误的。我已经编辑过了。但是，是的，您可以删除这些行而不是评论。

我现在试了你的方法，得到的是：""type":"InternalError", "message":"react-packager 遇到内部错误，请检查您的终端错误输出了解更多详情”。

我在这里遇到问题：“packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js:229:13)”，你已经看到了吗？谢谢。

[已解决] 我编辑了错误的 component.js。我没有查看应用程序中的 node_modules，而是更改了 npm 目录中的文件。谢谢！

【参考方案2】：

看看这个：react-native-backbone