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

Posted

技术标签:

【中文标题】我可以将 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

【讨论】:

以上是关于我可以将 Backbone 与 React Native 一起使用吗?的主要内容,如果未能解决你的问题,请参考以下文章

让 React + Backbone 应用程序在没有集合的情况下变得安静

React + Backbone,目标容器不是 DOM 元素

React-Redux 应用程序真的可以像 Backbone 一样扩展吗?即使重新选择。在移动

对 Backbone + React 应用程序中的模型的困惑

Backbone Backbone初探

我正在使用backbone.stickit 进行模型绑定。如何将预填充选择与模型绑定?