2015-03-29 13 views
120

मैं React Native की संभावनाओं को कर रहा हूँ, जबकि नेविगेटर घटक की मदद से विचारों के बीच कस्टम नेविगेशन के साथ एक डेमो एप्लिकेशन को विकसित - http://facebook.github.io/react-native/docs/navigator.html#contentप्रतिक्रिया-मूल निवासी - नेविगेटर घटक के साथ कस्टम नेविगेशन

मुख्य अनुप्रयोग वर्ग renders नाविक और renderScene रिटर्न पारित कर दिया घटक के अंदर:

class FeedView extends React.Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Text> 
        Feed View! 
       </Text> 
      </View> 
     ); 
    } 
} 

class WelcomeView extends React.Component { 
    onPressFeed() { 
     this.props.navigator.push({ 
      name: 'FeedView', 
      component: FeedView 
     }); 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.welcome}> 
        Welcome View! 
       </Text> 

       <Text onPress={this.onPressFeed.bind(this)}> 
        Go to feed! 
       </Text> 
      </View> 
     ); 
    } 
} 
:

class App extends React.Component { 
    render() { 
     return (
      <Navigator 
       initialRoute={{name: 'WelcomeView', component: WelcomeView}} 
       configureScene={() => { 
        return Navigator.SceneConfigs.FloatFromRight; 
       }} 
       renderScene={(route, navigator) => { 
        // count the number of func calls 
        console.log(route, navigator); 

        if (route.component) { 
         return React.createElement(route.component, { navigator }); 
        } 
       }} 
      /> 
     ); 
    } 
} 

के लिए अब एप्लिकेशन 2 बार देखा गया शामिल

क्या मैं यह पता लगाने के लिए चाहते है -

  • मैं लॉग में देख सकते हैं कि जब दबाने renderScene कई बार कहा जाता है, हालांकि दृश्य सही ढंग से एक बार renders "को खिलाने के लिए जाना"। क्या यह एनीमेशन कैसे काम करता है?

    index.ios.js:57 Object {name: 'WelcomeView', component: function} 
    index.ios.js:57 Object {name: 'FeedView', component: function} 
    // renders Feed View 
    
  • आम तौर पर मेरी दृष्टिकोण रास्ता प्रतिक्रिया अनुरूप करता है, या यह बेहतर किया जा सकता है?

मैं क्या हासिल करना चाहते हैं NavigatorIOS के लिए, लेकिन नेविगेशन पट्टी (हालांकि कुछ दृश्यों अपने स्वयं के कस्टम नेविगेशन पट्टी होगा) के बिना कुछ इसी तरह है।

+1

@ericvicenti इस उदाहरण को [नेविगेटर पेज] (https: //facebook.github पर शामिल किया जाना चाहिए) दस्तावेज़ों में .io/प्रतिक्रिया-मूल/दस्तावेज़/navigator.html # सामग्री)। यह अधिक पूर्ण है और संदर्भ में नेविगेटर घटक का उपयोग करने के तरीके की एक बेहतर तस्वीर देता है। – greatwitenorth

+0

बस अपना उदाहरण आज़माएं, क्या नेविगेटर पुश होने पर दृश्य स्वचालित रूप से बदलना चाहिए? मेरे लिए आपका उदाहरण फीड व्यू कभी नहीं दिखाता है! पाठ, इसलिए मैं सोच रहा हूं कि हाल के संस्करणों में कुछ बदल गया है या नहीं। – Ian

उत्तर

54

आपका दृष्टिकोण बढ़िया काम करना चाहिए। एफबी पर बड़े ऐप्स में, हम दृश्य घटक के लिए require() पर कॉल करने से बचते हैं जब तक कि हम इसे प्रस्तुत नहीं करते हैं, जो स्टार्ट-अप समय को बचा सकता है।

renderScene फ़ंक्शन को तब कॉल किया जाना चाहिए जब दृश्य को पहले नेविगेटर पर धक्का दिया जाता है। जब नेविगेटर को फिर से प्रस्तुत किया जाता है तो इसे सक्रिय दृश्य के लिए भी बुलाया जाएगा। यदि आप renderScene को push के बाद कई बार कॉल करते हैं, तो यह शायद एक बग है।

नेविगेटर अभी भी प्रगति पर एक काम है, लेकिन अगर आपको इसके साथ कोई समस्या मिलती है तो कृपया जिथब पर फाइल करें और मुझे टैग करें! (@ericvicenti)

+0

हैलो @ एरिक कृपया इस लिंक को देखें: - https://stackoverflow.com/questions/44538306/navigate-user-to-new-screen-on-listitem-click-react-native – sid

2

NavigatorRN 0.44.0 में आप react-native-deprecated-custom-components बजाय उपयोग कर सकते हैं कि Navigator उपयोग कर रहा है अपने मौजूदा आवेदन का समर्थन करने के लिए अब मान्य नहीं है।

0

नेविगेटर घटक अब बहिष्कृत किया गया है। आप askonov द्वारा प्रतिक्रिया-देशी-राउटर-फ्लक्स का उपयोग कर सकते हैं, इसमें एक विशाल विविधता है और कई अलग-अलग एनिमेशन का समर्थन करता है और कुशल है

संबंधित मुद्दे