如何使用reactfire与本机反应

Question

我正在尝试使用'reactfire'coinin，并为我的应用做出本机反应。

我安装了npm模块。

$ npm install reactfire --save

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

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

我将mixin添加到班级

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);
}

我得到了

我可以使用'firebase'npm模块，但不是'reactfire'模块，我想在我的app中使用mixin而不是其他替代品。

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

PS：firebase documentation中的缺陷，因为只是做'mixins：[ReactFireMixin]，'没有做任何事情，当为本地反应开发时，你没有html文件。

是的，我是反应新手，所以这可能只是浪费你的时间。

以下是完整代码 - github repo

Answer 1

我刚刚测试过，当我在React Native应用程序中使用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);

请注意，在许多情况下，没有必要使用ReactFire。例如，这是我使用的代码而不是this.bindAsArray(ref, 'items')：

因此，如果ReactFire导致您出现问题，请考虑在没有ReactFire的情况下使用相同的工作。

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