मैं नेविगेटर के संदर्भ में रेंडरसेन में कैसे संदर्भित करूं?

Question

मैं प्रतिक्रियात्मक मूल के साथ प्रयोग कर रहा हूं और मुझे उस दृश्य में नेविगेटर के संदर्भ को पारित करने में समस्या हो रही है जो मैं प्रस्तुत कर रहा हूं। नेविगेटर के बिना, न्यूज़लिस्ट आइटम दृश्य परिवर्तन को ट्रिगर नहीं कर सकते हैं।

render: function() { 
    return (
     <Navigator 
      initialRoute={ { name: 'NewsList', index: 0 } } 
      renderScene={ (route, navigator) => NewsList } 
     />              
    );               
}, 

इसी तरह, प्रस्तुत दृश्य समारोह में मुझे पंक्ति प्रतिपादन समारोह में नेविगेटर पास करने की आवश्यकता है।

<UIExplorerPage noSpacer={true} noScroll={true}> 
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this._renderRow} 
     onEndReached={this.onEndReached} 
    /> 
</UIExplorerPage> 

इस तरह के संदर्भों को पारित करने का बेवकूफ तरीका क्या है?

Answer 1

यदि मैं आपका प्रश्न सही ढंग से समझता हूं, तो आप कह रहे हैं कि नेविगेशन ईवेंट को ट्रिगर करने के लिए आपकी समाचार सूची आइटम घटकों को नेविगेटर के संदर्भ की आवश्यकता है। यह (आईएमओ) गलत दृष्टिकोण है।

इसके बजाय, सूची आइटम को कॉलबैक पास करें। कॉलबैक अभिभावक समाचार सूची घटक पर एक विधि है, और इसमें पहले से ही नेविगेटर का संदर्भ है जिसे आप कॉल कर सकते हैं। इस तरह आप अपने घटक पदानुक्रम के नीचे नेविगेटर को हर तरह से गुजरने से बच सकते हैं।

मैं एक कोड उदाहरण दे सकता हूँ कि अगर यह स्पष्ट नहीं है :)

Answer 2

तरह कॉलिन उल्लेख किया है, आप अपनी सूची में आइटम करने के लिए एक कॉलबैक पारित करने के लिए की जरूरत है। नीचे दिया गया एक उदाहरण प्रोजेक्ट (UIExplorer) से कोड मूल रूप से प्रतिक्रिया में है।

यहां, हम navigator ऑब्जेक्ट को NavMenu में पास कर रहे हैं जो सूची घटक है।

var TabBarExample = React.createClass({ 
    // Other methods... blah blah 
    renderScene: function(route, nav) { 
     switch (route.id) { 
      case 'navbar': 
      return <NavigationBarSample navigator={nav} />; 
      case 'breadcrumbs': 
      return <BreadcrumbNavSample navigator={nav} />; 
      case 'jumping': 
      return <JumpingNavSample navigator={nav} />; 
      default: 
      return (
       <NavMenu 
       message={route.message} 
       navigator={nav} 
       onExampleExit={this.props.onExampleExit} 
       /> 
      ); 
     } 
    }, 

    render: function() { 
     return (
      <Navigator 
      style={styles.container} 
      initialRoute={{ message: "First Scene", }} 
      renderScene={this.renderScene} 
      configureScene={(route) => { 
       if (route.sceneConfig) { 
       return route.sceneConfig; 
       } 
       return Navigator.SceneConfigs.FloatFromBottom; 
      }} 
      /> 
     ); 
     } 
}); 

NavMenu घटक में, हम हर NavButton की onPress पर एक कॉलबैक गुजर रहे हैं।

class NavMenu extends React.Component { 
    render() { 
    return (
     <ScrollView style={styles.scene}> 
     <Text style={styles.messageText}>{this.props.message}</Text> 
     <NavButton 
      onPress={() => { 
      this.props.navigator.push({ 
       message: 'Swipe right to dismiss', 
       sceneConfig: Navigator.SceneConfigs.FloatFromRight, 
      }); 
      }} 
      text="Float in from right" 
     /> 
     <NavButton 
      onPress={() => { 
      this.props.navigator.push({ 
       message: 'Swipe down to dismiss', 
       sceneConfig: Navigator.SceneConfigs.FloatFromBottom, 
      }); 
      }} 
      text="Float in from bottom" 
     /> 
     // Omitted rest of the NavButtons. 
     </ScrollView> 
    ); 
} 

उदाहरण के लिए यहां link है।

Answer 3

प्रश्न को थोड़ी सी बात की गई थी। मैंने UIExplorerPage, जैसे <UIExplorerPage navigator={navigator} /> पर नेविगेटर जोड़कर मेरी समस्या का समाधान किया। this.props का उपयोग कर UIExplorerPage के भीतर गुणों का उपयोग किया जा सकता है।