Пользовательская навигация с компонентом Навигатор в 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
```
Как правило, мой подход соответствует пути React или лучше?

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

— Kosmetika
источник

1

@ericvicenti этот пример должен быть включен на странице навигатора в документах. Он более полный и дает более полное представление о том, как использовать компонент «Навигатор» в контексте.

— greatwitenorth

Просто пробуя свой пример, должна ли сцена автоматически меняться, когда происходит нажатие навигатора? Для меня твой пример никогда не показывает вид канала! текст, так что мне интересно, если что-то изменилось с последними версиями.

— Ян

74

Ваш подход должен работать отлично. В больших приложениях на Fb мы избегаем вызова require()компонента сцены до тех пор, пока мы его не визуализируем, что может сэкономить немного времени запуска.

renderSceneФункция должна быть вызвана , когда сцена первым толкнул в навигаторе. Он также будет вызываться для активной сцены, когда навигатор будет перерисован. Если вы видите, что вам renderSceneзвонят несколько раз после a push, то это, вероятно, ошибка.

Навигатор все еще находится в стадии разработки, но если вы обнаружите какие-либо проблемы с ним, пожалуйста, зарегистрируйтесь на github и отметьте меня! (@Ericvicenti)

— Эрик Висенти
источник

1

Здравствуйте @Eric, пожалуйста, посмотрите на эту ссылку: - stackoverflow.com/questions/44538306/…

— sid

2

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

— Вивек Мару
источник

1

Как уже упоминалось ранее, Navigator устарел с версии 0.44, но все еще может быть импортирован для поддержки более старых приложений:

Навигатор был удален из основного пакета React Native в версии 0.44. Модуль был перемещен в пакетact-native-custom-components , который может быть импортирован вашим приложением для обеспечения обратной совместимости.

Чтобы увидеть исходные документы для Navigator, перейдите на более старую версию документов.

В соответствии с документами (React Native v0.54) Навигация между экранами . Теперь рекомендуется использовать React Navigation, если вы только начинаете, или NavigatorIOS для не-Android приложений

Если вы только начинаете навигацию, вы, вероятно, захотите использовать React Navigation . React Navigation предоставляет простое в использовании навигационное решение с возможностью представления общей навигации стека и шаблонов навигации с вкладками на iOS и Android.

...

Если вы ориентируетесь только на iOS, вы можете также проверить NavigatorIOS как способ предоставления собственного внешнего вида с минимальной конфигурацией, поскольку он предоставляет оболочку для собственного класса UINavigationController.

Примечание : на момент предоставления этого ответа React Native был версии 0.54.

— JSON C11
источник

0

Компонент навигатора устарел. Вы можете использовать response-native-router-flux от askonov, он имеет огромное разнообразие, поддерживает множество различных анимаций и эффективен

— Дивье Шах
источник