如何将 reactfire 与 react native 一起使用

Question

我正在尝试将“reactfire”mixin 与 react native 一起用于我的应用程序。

我安装了 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”模块，我想在我的应用程序中使用 mixin 而不是其他替代方案。

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

PS：firebase documentation 存在缺陷，因为只执行 'mixins: [ReactFireMixin]，' 并没有做任何事情，并且在为 react native 开发时，您没有 html 文件。

是的，我是一个 react 新手，所以这可能只是在浪费你的时间。

这是完整代码 - 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));