2016-04-20 50 views
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; 

回答

2

你必須做這樣的事情:

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


} 
+1

謝謝! subscriptionIsReady以這種方式工作。我會在上面更新我的帖子以顯示完整的示例。 –

相關問題