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