मैं चयनित या नहीं के आधार पर MapMarker छवियों के संग्रह को गतिशील रूप से अपडेट कैसे करूं?

Question

मुझे हाल ही में इस बात से परेशान किया गया है, और मैं मानचित्र मार्कर छवियों को गतिशील रूप से अद्यतन करने के लिए देख रहा हूं कि नक्शा मार्कर का चयन/सक्रिय है या नहीं (प्रत्येक MapMarker की एक श्रेणी है जिसमें संदर्भ या तो सक्रिय छवि या डिफ़ॉल्ट छवियों के दो संग्रहों से छवि; ब्याज चिह्न और ब्याज चिह्न चयनित। अनिवार्य रूप से मेरे पास नक्शा मार्कर संग्रह का संग्रह है जो मैप मार्कर संग्रह के माध्यम से मैपिंग के साथ प्रस्तुत किया जाता है। प्रत्येक MapMarker MapView.Marker का एक बच्चा घटक है।

मैं प्रस्तुत करना चाहता हूं सभी MapMarkers को डिफ़ॉल्ट गैर-चयनित/गैर-सक्रिय स्थिति में ब्याज से डिफ़ॉल्ट छवि वाले आइकन में, जब चयनित किया गया है, तो MapMarker छवि को रुचि से सक्रिय छवि में बदलना चाहिए Icon चयनित, जब कोई अन्य MapMarker चयनित चुना गया है, तो उसे वापस डिफ़ॉल्ट पर वापस जाना चाहिए छवि, और नया चयनित छवि में बदलना चाहिए।

वर्तमान में, मैं डिफ़ॉल्ट छवि के साथ मानचित्र मार्करों को प्रस्तुत करने में सक्षम हूं लेकिन मैपमार्कर का चयन करते समय छवि तुरंत तब तक नहीं बदलती जब तक कि आप ज़ूम आउट/ज़ूम इन नहीं करते हैं यानी किसी प्रकार का कारण बनना पुनः प्रस्तुत करें, मुझे यह चाहिए कि मैपमार्कर पर क्लिक करने से तुरंत छवि अपडेट हो जाएगी।

MapScreen.js: एक मानचित्र के माध्यम से MapView.Marker MapMarkers के सभी के लिए MapView बाहर रेंडर।

 <MapView 
      ref={map => { this._map = map }} 
      style={Styles.Map.map} 
      initialRegion={this.props.region} 
      onRegionChange={this.handleRegionChange} 
     > 
      { 
       this.props.events 
        .filter(this.eventFilterTimeNearFuture) 
        .filter(this.eventFilterTimeNotPast) 
        .filter(this.eventFilterDistance) 
        .filter(this.eventFilterInterest) 
        .map(e => 
         <MapView.Marker 
          key={e.id} 
          onPress={() => this.handleLocationPush(e)} // Set selected event state 
          coordinate={e.location} 
         > 
          <MapMarker 
           event={e} 
           size={this.state.markerSize} 
           selected={this.state.selectedEvent} // The selected event set by state call. 
          /> 
         </MapView.Marker> 
        ) 
      } 
      { !this.props.regionMock && 
       <MapView.Marker 
        key={'userLocation'} 
        coordinate={this.props.region} 
       > 
        <MapMarker size={'user'} /> 
       </MapView.Marker> 
      } 
     </MapView> 

MapMarker.js

import {interestIcons, interestColors, interestIconsSelected} from "../../utils/Icons"; 

import {Styles} from '../../StyleProvider'; 

class MapMarker extends React.Component { 

constructor() { 
    super(); 
    this.state = { 
     initialized: false, 
     active: false, 
    }; 
};  

componentWillReceiveProps(nextProps) { 
    if (!this.state.initialized) { 
     console.log('initialization');    
     this.setState({initialized: true}); 
    } 
    else { 
     // If the nextProps.selected prop exists which it will 
     if (nextProps.selected) { 
      // If the nextProps.selected props id equals the this event id then selected else non-selected. 
      if (nextProps.selected.id === nextProps.event.id) { 
       console.log('SELECTED: ' + JSON.stringify(nextProps.selected)); 
       // set staae to active 
       this.setState({ 
        active: true 
       }); 
       console.log(interestIconsSelected[nextProps.event.interest[0]]); 
      } else { 
       // set state to not active 
       // console.log('NON-SELECTED: ' + JSON.stringify(nextProps.event)); 
       this.setState({ 
        active: false 
       });     
      } 
      this.forceUpdate(); 
     } 
    } 
} 

markerIcon(interest) { 
    return this.state.active ? interestIconsSelected[interest] : interestIcons[interest]; 
} 

renderIcon() { 
    if (this.props.event.type === 'Event') { 
     return (
      <Image 
       source={this.markerIcon(this.props.event.interest[0])} 
       style={Styles.MapMarker.eventImage} 
      /> 
     ) 
    } 
} 

componentWillReceiveProps (nextProps) अभी भी कार्य प्रगति पर है और यह कि 'काफी अच्छी तरह से' वर्तमान चयनित घटना और अल गैर चयनित घटनाओं को दर्शाता है।

मैं this.state.image कहना उपयोग करने के लिए छवि स्रोत सेट करने का प्रयास किया और उसके बाद componentWillReceiveProps में छवि राज्य की स्थापना क्रमश:

यानी

if (nextProps.selected) { 
    // If the nextProps.selected props id equals the this event id then selected else non-selected. 
    if (nextProps.selected.id === nextProps.event.id) { 
     console.log('SELECTED: ' + JSON.stringify(nextProps.selected)); 
     // set staae to active 
     this.setState({ 
      active: true, 
      image: this.markerIcon(nextProps.event.interest[0], true) 
     }); 
     console.log(interestIconsSelected[nextProps.event.interest[0]]); 
    } else { 
     // set state to not active 
     console.log('NON-SELECTED: ' + JSON.stringify(nextProps.event)); 
     this.setState({ 
      active: false, 
      image: this.markerIcon(nextProps.event.interest[0], false) 
     });     
    } 
} 

renderIcon() { 
    if (this.props.event.type === 'Event') { 
     return (
      <Image 
       source={this.state.image} 
       style={Styles.MapMarker.eventImage} 
      /> 
     ) 
    } 
} 

छवि बदलें राज्य उस छवि को तुरंत बदल जाएगा में अधिक प्रभावी ढंग से काम करने के लिए प्रतीत होता है, लेकिन ऐसा लगता है कि प्रारंभिक रेंडर पर छवि बिल्कुल सेट नहीं की जाएगी, इसलिए यह चयनित होने तक केवल एक खाली आइकन होगा।

बहुत बहुत धन्यवाद, किसी भी मदद की सराहना करते हैं।

अद्यतन: MapView.Marker के तहत छवि घटक को परिभाषित करने का प्रयास किया गया और यह काम नहीं करता है।

this.state.markers 
.map(e => 
    <MapView.Marker 
     key={e.id} 
     onPress={() => this.handleLocationPush(e)} 
     coordinate={e.location} 
    > 
     {/* <MapMarker 
      event={e} 
      size={this.state.markerSize} 
     /> */} 
     <Image 
      source={this.state.selectedEvent === e ? interestIconsSelected[e.interest[0]] : interestIcons[e.interest[0]]} 
      style={Styles.MapMarker.eventImage} 
     /> 
    </MapView.Marker> 
) 

लेकिन यह काम करता है, हालांकि आप MapView.Marker को स्टाइल लागू करने के लिए सक्षम होने के लिए नहीं दिखाई देते हैं, लेकिन यह एक कार्यान्वयन मैं के रूप में मैं कस्टम MapMarker घटक

this.state.markers 
.map(e => 
    <MapView.Marker 
     key={e.id} 
     onPress={() => this.handleLocationPush(e)} 
     coordinate={e.location} 
     image={this.state.selectedEvent === e ? interestIconsSelected[e.interest[0]] : interestIcons[e.interest[0]]} 
    /> 
) 

रखना चाहते हैं चाहते हैं नहीं है

मानचित्र के उपरोक्त दो स्निपेट या तो MapView.Marker पर सीधे छवि प्रोप का उपयोग कर या MapView.Marker के तहत सीधे एक छवि घटक रखने के लिए MapMaper Child Component का उपयोग करने के लिए कोई अच्छा नहीं है।

Answer 1

आप componentWillReceiveProps जीवन चक्र विधि का उपयोग यह पहली बार में नहीं चला प्रस्तुत करना भी तुम्हारे साथ constructor राज्य में गलत है this.state.initialized उपयोग करती हैं इसलिए यह आप दो बार यह सक्रिय

componentWillReceiveProps(nextProps) { // it did not run at first render 
    if (!this.state.initialized) { // this.state.initialized with is false in constructor 
    console.log('initialization');    
    this.setState({initialized: true}); 
    } 
    ....... 
} 

आप पूरी तरह से हटा सकते हैं बनाने के लिए क्लिक करता है की जरूरत है कर देगा अपने componentWillReceiveProps अगर आप इस

markerIcon() { //did not get interest directly instead access it from props 
    return this.props.selected.id === this.props.event.id ? 
    interestIconsSelected[this.props.event.interest[0]] 
    : 
    interestIcons[this.props.event.interest[0]]; 
} 

यहाँ आप समान तुलना के साथ दो वस्तुओं की तुलना के रूप में The Deep आप के बजाय कोलाहल चोर नहीं प्राप्त करने के लिए इस तरह की कुछ बात का उपयोग कर सकते हैं की तरह कुछ आपस में जुड़े see more

<Image 
    // use this.state.selectedEvent.id === e.id instead of this.state.selectedEvent === e 
    source={this.state.selectedEvent.id === e.id ? interestIconsSelected[e.interest[0]] : interestIcons[e.interest[0]]} 
    style={Styles.MapMarker.eventImage} 
/> 

मुझे आशा है कि धन्यवाद