使用 createContainer 将 Meteor 数据导入 React Native 的问题答案

【问题标题】：Issues getting Meteor data into React Native using createContainer使用 createContainer 将 Meteor 数据导入 React Native 的问题
【发布时间】：2016-05-15 18:28:35
【问题描述】：

我似乎无法让 createContainer 处理 React Native 和 Meteor 数据。我目前正在使用react-native-meteor 包和最新版本的 Meteor/React Native。我已经查看了包的信息和 Meteor 的 createContainer 官方文章。我想首先，我不太确定这个容器是如何工作的。看起来它包装了最后调用的组件并在响应数据更改时更新它？

我已经尝试了几种不同的方法，但以下是我目前使用的方法。我不确定 createContainer 是否被调用，因为从我的日志语句中看不到控制台中的任何内容。我试过使用 Meter.user() 和 Meteor.userId() 也没有运气。知道我做错了什么吗？

'use strict';

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { loginToSpotify } from './react-native-spotify-auth'
import Meteor, { createContainer } from 'react-native-meteor'
//import { testComponent } from './component'

//TODO: openURL bug on iOS9 causes iOS to confirm before redirect: http://stackoverflow.com/questions/32312009/how-to-avoid-wants-to-open-dialog-triggered-by-openurl-in-ios-9-0
//May also want to look into using Universal  links

Meteor.connect('http://localhost:3000/websocket');//do this only once

class ReactNativeApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      access_token: null
    };
  }

  componentDidMount() {
    loginToSpotify();
  }

  render() {
    const { todosReady } = this.props;
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
        <Text>
          Hello {!todosReady && <Text>Not Ready</Text>}
        </Text>
      </View>
    );
  }
}

export default createContainer(params=>{
  const handle = Meteor.subscribe('todos');
  console.log('todos: ' + Meteor.collection('todos').find());
  return {
    todosReady: handle.ready()
  }
}, ReactNativeApp);



const 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('ReactNativeApp', () => ReactNativeApp);

【问题讨论】：

标签： javascript meteor reactjs react-native

【解决方案1】：

您能在控制台中看到流星连接到应用程序吗？你不应该在 Meteor.connect 中使用 http，而是 ws://localhost:3000/websocket

【讨论】：

【解决方案2】：

确保您的流星应用程序正在运行。
使用本地机器的IP，不要使用localhost。如果您使用手机作为模拟器，那很好。在路由器中连接并使用您的机器语言。

有关更多信息，您可以关注此React Native Meteor Boilerplate。

【讨论】：