反应性使用“;inProgress团队/反应原生流星“;Meteor 1.3中

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

本文关键字：流星 Meteor 原生 inProgress 团队      更新时间：2023-09-26

我在react native（0.23）中有一个项目，Meteor 1.3作为后端，我想显示一个联系人项目列表。当用户单击联系人项目时，我希望在该项目前面显示一个复选标记。

对于Meteor DDP的连接，我使用了Progress 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发生更改时才会重新渲染。是否有任何方法可以在不更改/更新dataSource的情况下强制重新渲染？

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

你必须这样做：

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

}
相关文章：