2016-04-20 7 views
2

私はMeteor 1.3と反応ネイティブ(0.23)のプロジェクトをバックエンドとして持っており、連絡先項目のリストを表示したいと考えています。ユーザーが連絡先アイテムをクリックすると、そのアイテムの前にチェックマークが表示されます。Meteor 1.3で反応しないinProgress-team/react-native-meteor

Meteor DDPへの接続については、素晴らしいライブラリinProgress-team/react-native-meteorを使用しています。

import Meteor, { connectMeteor, MeteorListView, MeteorComplexListView } from 'react-native-meteor'; 

class ContactsPicker extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     subscriptionIsReady: false 
    }; 
} 

componentWillMount() { 
    const handle = db.subscribe("contacts"); 
    this.setState({ 
     subscriptionIsReady: handle.ready() 
    }); 
} 

render() { 
    const {subscriptionIsReady} = this.state; 
    return (
     <View style={gs.standardView}> 
      {!subscriptionIsReady && <Text>Not ready</Text>} 
      <MeteorComplexListView 
       elements={()=>{return Meteor.collection('contacts').find()}} 
       renderRow={this.renderItem.bind(this)} 
      /> 
     </View> 
    ); 
} 

最初の問題は、サブスクリプションIDReadyがtrueを返すと再レンダリングをトリガーしないことです。サブスクリプションの準備が整い、テンプレートを更新するのを待つ方法はありますか?

私の2番目の問題は、リスト項目をクリックすると状態が更新され、チェックマークが表示されるはずですが、MeteorListViewはdataSourceが変更された場合にのみ再レンダリングすることです。 dataSourceを変更/更新せずに再レンダリングを強制する方法はありますか?

EDIT 1(溶液1):

は、実用的なソリューションを提供するためのuser1078150 @ありがとうございます。ここに完全なソリューション:

'use strict'; 
import Meteor, { connectMeteor, MeteorListView, MeteorComplexListView } from 'react-native-meteor'; 


class ContactsPicker extends React.Component { 

getMeteorData() { 

    const handle = Meteor.subscribe("contacts"); 
    return { 
     subscriptionIsReady: handle.ready() 
    }; 
} 

constructor(props) { 

    super(props); 

    this.state = { 
     subscriptionIsReady: false 
    }; 
} 

componentWillMount() { 
    // NO SUBSCRIPTION HERE 
} 

renderItem(contact) { 
    return (
     <View key={contact._id}> 
      <TouchableHighlight onPress={() => this.toggleSelection(contact._id)}> 
       <View> 
        {this.state.selectedContacts.indexOf(contact._id) > -1 && <Icon />} 
        <Text>{contact.displayName}</Text> 
       </View> 
      </TouchableHighlight> 
     </View> 
    ) 
} 

render() { 
    const {subscriptionIsReady} = this.data; 
    return (
     <View> 
      {!subscriptionIsReady && <Text>Not ready</Text>} 
      <MeteorComplexListView 
       elements={()=>{return Meteor.collection('contacts').find()}} 
       renderRow={this.renderItem.bind(this)} 
      /> 
     </View> 
    ); 
} 
} 

connectMeteor(ContactsPicker); 
export default ContactsPicker; 

答えて

2

あなたはこのような何かをする必要があります:

getMeteorData() { 
    const handle = Meteor.subscribe("contacts"); 
    return { 
     ready: handle.ready() 
    }; 
} 
render() { 
    const { ready } = this.data; 


} 
+1

ありがとうございました! subscriptionIsReadyはこのように動作します。私は完全な例を示すために上記の投稿を更新します。 –