Спеціальна навігація з компонентом Навігатора в React-Native


158

Я вивчаю можливості 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викликається кілька разів, хоча перегляд відображається правильно один раз. Як працює анімація?

    index.ios.js:57 Object {name: 'WelcomeView', component: function}
    index.ios.js:57 Object {name: 'FeedView', component: function}
    // renders Feed View
    
  • Як правило, чи відповідає моєму підходу Реактивний спосіб, чи це можна зробити краще?

Я хочу досягти чогось подібного, NavigatorIOSале без панелі навігації (проте деякі види матимуть власну панель навігації).


1
@ericvicenti цей приклад повинен бути включений на сторінку Навігатора в документах. Він більш повний і дає кращу картину використання компонента Навігатора в контексті.
greatwitenorth

Спробуючи ваш приклад, чи повинна сцена змінюватися автоматично, коли відбувається натиск навігатора? Для мене ваш приклад ніколи не показує подання подачі! текст, тому мені цікаво, чи щось змінилося з останніми версіями.
Ян

Відповіді:


74

Ваш підхід повинен чудово працювати. У великих додатках на Fb ми уникаємо виклику require()компонента для сцени, поки не виведемо його, що може заощадити трохи часу запуску.

renderSceneФункція повинна бути викликана , коли сцена першим штовхнув у навігаторі. Він також буде викликаний для активної сцени, коли Навігатор буде відтворений. Якщо ви бачите, що вам renderSceneдзвонять кілька разів після push, то це, ймовірно, помилка.

Навігатор все ще працює, але якщо ви знайдете якісь проблеми з ним, будь ласка, подайте на github та позначте мене! (@ericvicenti)


1
Привіт @Eric, будь ласка, подивіться за цим посиланням: - stackoverflow.com/questions/44538306/…
sid

2

Navigatorтепер застаріло, RN 0.44.0ви можете використовувати react-native-deprecated-custom-componentsзамість цього, щоб підтримувати наявну програму, яка використовується Navigator.


1

Як уже згадувалося раніше, Навігатор застарілий з версії 0.44, але його все ще можна імпортувати для підтримки старих програм:

Навігатор вилучено з основного пакета React Native у версії 0.44. Модуль переміщено до пакета компонентів, що реагують на власні реакції, які можуть бути імпортовані вашою програмою для збереження зворотної сумісності.

Щоб побачити оригінальні документи для Навігатора, перейдіть на старішу версію документів.

Відповідно до документів (React Native v0.54), навігація між екранами . Тепер рекомендується використовувати Реактивну навігацію, якщо ви тільки починаєте роботу, або Навігатор IOS для програм, не для Android

Якщо ви тільки починаєте користуватися навігацією, ви, ймовірно, захочете скористатися Реактивної навігацією . Реактивна навігація - це просте у користуванні навігаційне рішення з можливістю представлення загальних моделей навігації по стеках та навігаційних вкладок як на iOS, так і на Android.

...

Якщо ви орієнтуєтеся лише на iOS, ви можете також перевірити NavigatorIOS як спосіб забезпечити природний вигляд з мінімальною конфігурацією, оскільки він забезпечує обгортку навколо рідного класу UINavigationController.

NB : На момент надання такої відповіді, React Native був у версії 0.54


0

Зараз компонент Навігатора застарілий. Ви можете використовувати react-native-router-flux від askonov, він має величезну різноманітність і підтримує безліч різних анімацій і є ефективним

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.