javascript - रीएक्ट-नेटिव में नेविगेटर घटक के साथ कस्टम नेविगेशन

ios navigation (3)

मैं Navigator घटक की मदद से विचारों के बीच कस्टम नेविगेशन के साथ एक डेमो ऐप विकसित करते हुए रिएक्ट नेटिव की संभावनाएं तलाश रहा हूं।

मुख्य ऐप क्लास नाविक और रेंडर के अंदर रेंडर करता है।

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 });
                    }
                }}
             />
        );
    }
}

अभी के लिए ऐप में दो दृश्य हैं:

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>
        );
    }
}

मैं यह जानना चाहता हूं:

मैं लॉग में देखता हूं कि जब "फीड पर जाएं" renderScene को renderScene जाता है, तो कई बार कहा जाता है, हालांकि दृश्य एक बार सही तरीके से प्रस्तुत होता है। क्या यह है कि एनीमेशन कैसे काम करता है?
```
index.ios.js:57 Object {name: 'WelcomeView', component: function}
index.ios.js:57 Object {name: 'FeedView', component: function}
// renders Feed View
```
आम तौर पर मेरा दृष्टिकोण प्रतिक्रिया मार्ग के अनुरूप होता है, या क्या यह बेहतर किया जा सकता है?

मैं जो हासिल करना चाहता हूं, वह NavigatorIOS समान है, लेकिन नेविगेशन बार के बिना (हालांकि कुछ विचारों का अपना कस्टम नेविगेशन बार होगा)।

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

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

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

जैसा कि दूसरों ने पहले उल्लेख किया है, नेविगेटर को v0.44 से हटा दिया गया है, लेकिन अभी भी पुराने अनुप्रयोगों का समर्थन करने के लिए आयात किया जा सकता है:

नेविगेटर को 0.44 संस्करण में मूल प्रतिक्रियाशील मूल पैकेज से हटा दिया गया है। मॉड्यूल को एक react-native-custom-components पैकेज में स्थानांतरित किया गया है जिसे आपके एप्लिकेशन द्वारा पीछे की संगतता बनाए रखने के लिए आयात किया जा सकता है।

नेविगेटर के लिए मूल डॉक्स देखने के लिए, डॉक्स के पुराने संस्करण पर जाएँ।

डॉक्स के अनुसार (रिएक्टिव नेटिव v0.54) स्क्रीन के बीच नेविगेट करना । यदि आप अभी शुरू हो रहे हैं, या गैर-एंड्रॉइड अनुप्रयोगों के लिए NavigatorIOS रिएक्ट नेविगेशन का उपयोग करने की सिफारिश की गई है

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

...

यदि आप केवल iOS को लक्षित कर रहे हैं, तो आप एक मूल स्वरूप प्रदान करने और न्यूनतम कॉन्फ़िगरेशन के साथ महसूस करने के एक तरीके के रूप में NavigatorIOS भी देख सकते हैं, क्योंकि यह मूल UINavigationController वर्ग के आसपास एक आवरण प्रदान करता है।

NB : इस उत्तर को प्रदान करने के समय, प्रतिक्रिया मूल निवासी 0.54 संस्करण में था

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