我可以将 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 一样扩展吗?即使重新选择。在移动