Question

我似乎无法使用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);

Answer 1

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

Answer 2

确保您的流星应用程序正在运行。
使用本地计算机的IP，请勿使用localhost。如果您使用移动设备作为模拟器，这很好。在路由器中连接并使用您的机器语言。

有关详情，请点击此React Native Meteor Boilerplate。

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

2 个答案: