javascript - react navigation




التنقل المخصص مع مكون Navigator في React-Native (3)

تم إهمال Navigator الآن في RN 0.44.0 يمكنك استخدام react-native-deprecated-custom-components RN 0.44.0 react-native-deprecated-custom-components بدلاً من ذلك لدعم تطبيقك الحالي الذي يستخدم Navigator .

أقوم باستكشاف إمكانيات React Native أثناء تطوير تطبيق تجريبي مع التنقل المخصص بين طرق العرض بمساعدة مكون Navigator .

فئة التطبيق الرئيسية تجعل المستكشف وداخل renderScene إرجاع مكون مرت:

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
  • بشكل عام ، هل تتوافق مقاربي مع طريقة React ، أم هل يمكن القيام بها بشكل أفضل؟

ما أريد تحقيقه هو شيء مشابه لبرنامج NavigatorIOS ولكن بدون شريط التنقل (ومع ذلك ، سيكون لبعض طرق العرض شريط تنقل مخصص خاص بها).


تم تجاهل عنصر المستكشف الآن. يمكنك استخدام react-native-router-flux بواسطة askonov ، حيث يحتوي على مجموعة متنوعة ضخمة ويدعم العديد من الرسوم المتحركة المختلفة وهو فعال


نهجكم يجب أن تعمل كبيرة. في التطبيقات الكبيرة في Fb ، نتجنب الاتصال بـ require() لمكون المشهد حتى نعرضه ، مما يمكن أن يوفر وقت بدء قليل.

يجب renderScene وظيفة renderScene عندما يتم دفع المشهد لأول مرة إلى Navigator. سيتم استدعاؤه أيضًا للمشهد النشط عندما يتم إعادة تقديم Navigator. إذا رأيت renderScene استدعاء renderScene عدة مرات بعد push ، فمن المحتمل أن يكون خطأ.

لا يزال المستكشف عملاً قيد التقدم ، لكن إذا وجدت أي مشكلة فيه ، فيرجى تقديم ملف على github ووضع علامة باسم لي! (ericvicenti)







react-native