Meteor 1.3 中 "inProgress-team/react-native-meteor" 的反应式使用

Question

我在 react-native (0.23) 中有一个项目，后端是 Meteor 1.3，我想显示一个联系人列表。当用户点击一个联系人项目时，我想在项目前面显示一个复选标记。

为了连接到 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 一旦 returns 为真就不会触发重新渲染。如何等待订阅准备好然后更新模板？

我的第二个问题是单击列表项会更新状态并且应该显示复选标记，但 MeteorListView 仅在数据源已更改时才重新呈现。有什么方法可以在不更改/更新数据源的情况下强制重新渲染？

编辑 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;

Answer 1

你必须这样做：

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


}

Meteor 1.3 中 "inProgress-team/react-native-meteor" 的反应式使用

Reactive usage of "inProgress-team/react-native-meteor" in Meteor 1.3

javascript

meteor

ecmascript-6

ddp

react-native