我在网上找到了几个不同的将React(View)与Backbone集成的例子,但是没有任何与React Native相同的例子。我想知道这是否可能,以及是否有任何样本可以玩。
这(https://github.com/magalhas/backbone-react-component)似乎也是一个很好的起点,但由于我没有任何知识,我不确定它是否仍可用于React Native。
感谢。
答案 0 :(得分:3)
你可以使用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主代码库中解决问题。
答案 1 :(得分:0)