Javascript 如何将react Fire与react native一起使用

我正在尝试为我的应用程序使用react-native的“reactfire”mixin

我安装了npm模块

$ npm install reactfire --save

我将模块包括在我的'index.ios.js'文件中

var ReactFireMixin = require('./node_modules/reactfire');

我在课堂上加入了混音

mixins: [ReactFireMixin],

我说

getInitialState: function() {
  return {
    items: [],
  }
},

componentWillMount: function() {
  var ref = new Firebase('https://<MY APP NAME>.firebaseio.com/tasks');
  this.bindAsArray(ref, 'items');
  console.log(ref);
  console.log(this.state.items);
}

getInitialState:function（）{
返回{
项目：[]，
}
},
componentWillMount:function（）{
var ref=新的Firebase（'https://.firebaseio.com/tasks');
这是BindaArray（参考“项目”）；
控制台日志（ref）；
console.log（this.state.items）；
}

我得到

我可以很好地使用“firebase”npm模块，但不能使用“reactfire”模块，我希望在我的应用程序中使用mixin，而不是其他替代方案

我也很好奇这个特定的mixin是如何处理离线使用的

PS:firebase中存在缺陷，因为只执行“mixins:[ReactFireMixin]”，什么都不做，并且在为react native开发时，您没有html文件

是的，我是个新手，所以这可能完全是在浪费你的时间

---

以下是完整的代码-

我刚刚测试过，在React原生应用程序中使用ReactFire时没有发现任何问题（至少对于Android）

我的整个

index.android.js

：

'use strict';

var React = require('react-native');
var Firebase = require('firebase');
var ReactFireMixin = require('reactfire');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight,
} = React;

var CoolProject = React.createClass({
  mixins: [ReactFireMixin],
  getInitialState: function() {
    return {
      items: []
    };
  },
  componentWillMount: function() {
    this.ref = new Firebase('https://nanochat.firebaseio.com/chat');
    this.bindAsArray(this.ref, 'items');
  },
  _onPressButton: function() {
    this.ref.push({ name: 'puf', message: this.state.text });
  },
  render: function() {
    var createItem = function(item, index) {
      return <Text>{item.name}: {item.message}</Text>
    };
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        {this.state.items.map(createItem)}
        <View style={styles.horizontal}>
          <TextInput onChangeText={(text) => 
              this.setState({ text: text})} value={this.state.text} />
          <TouchableHighlight onPress={this._onPressButton}>
            <Text>Send</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

---

问题到底是什么？还是错误？因此，应该在“this.state.items”中显示对象，并且console.log语句应该打印出这些对象，因为BindaArray（）调用，但是数组是空的，Firebase引用看起来像Encrypted，而我的表视图是空的，不显示任何数据行firebase ref在web上看起来是否不同？看起来它可能只是缩小了。如果react Fire与react Native不起作用，我也不会感到惊讶。这可能是因为它不起作用，但我认为它起作用了，或者看到他们在某处声明了它，我不确定“firebase在web上看起来不同吗？”这是cloneWithRows函数的问题，也是使用bindAsArray和bindAsObject之间的区别。很抱歉反应太晚，你帮了我很大的忙^^

this.ref.on('value', function(snapshot) {
  var items = [];
  snapshot.forEach(function(child) {
    items.push(child.val());
  });
  this.setState({ 'items': items });
}.bind(this));