2
我有一個以Meteor 1.3作爲後端的react-native(0.23)項目,並且想要顯示聯繫人項目列表。當用戶點擊聯繫人項目時,我想在項目前面顯示覆選標記。在Meteor 1.3中反應使用「inProgress-team/react-native-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>
);
}
第一個問題是,subscriptionIsReady一旦返回true就不會觸發重新渲染。我如何等待訂閱準備就緒並更新模板呢?
我的第二個問題是點擊列表項目更新狀態並應顯示覆選標記,但MeteorListView只在數據源發生更改時重新呈現。有沒有辦法強制重新渲染而不更改/更新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以這種方式工作。我會在上面更新我的帖子以顯示完整的示例。 –